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内 容 简 介 


本 书 以 零 基 础 讲解 为 宗旨 ， 用 实例 引导 读者 深入 学 习 , 采取 “网 站 基础 入 门 一 制作 静态 网 页 一 网 页 美化 布局 
一 设计 网 页 元 素 一 开发 动态 网 站 一 网 站 开发 实战 一 网 站 全 能 扩展 ”的 讲解 模式 , 深入 浅 出 地 讲解 网 页 设计 和 网 站 
建设 的 各 项 技术 及 实战 技能 。 

本 书 第 1 篇 【网 站 基础 入 门 】 主 要 内 容 包 括 网 页 设计 与 网 站 建设 基础 、 网 站 配色 与 布局 、HTML 语言 速成 、 
网 站 建设 基本 流程 与 制作 工具 等 。 第 2 篇 【制作 静态 网 页 】 主 要 内 容 包 括 使 用 Dreamweaver CC 创建 站 点 、 使 用 
文本 丰富 网 页 内 容 、 使 用 图 像 与 多 媒体 网 页 元 素 、 设 计 网 页 中 的 超 链接 、 使 用 网 页 表单 和 行为 等 。 第 3 篇 【网 页 
美化 布局 】 主 要 内 容 包 括 使 用 表格 布局 网 页 、 使 用 CSS 层 倒 样式 表 、 利 用 CSS+Div 布局 网 页 等 。 第 4 篇 【设计 
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态 网 站 】 主 要 内 容 包括 认识 PHP 语言 、 配置 动态 网 站 运行 环境 、 使 用 MySQL 数据 库 、 动 态 网 站 应 用 模块 开发 等 。 
第 6 篇 【网 站 开发 实战 】 主 要 内 容 包括 开发 网 站 用 户 管理 系统 和 开发 信息 资讯 管理 系统 等 。 第 7 篇 【网 站 全 能 扩 
展 】 主 要 内 容 包 括 网 站 的 测试 与 发 布 、 网 站 安全 与 防御 、 网 站 优化 与 推广 等 。 
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了 中 


区 到 
用 
“网 站 开发 案例 课堂 ”系列 图 书 是 专门 为 办 公 技 能 和 网 页 设计 初学 者 量 身 定制 的 一 套 学 
习 用 书 。 整 套 书 涵盖 网 页 设计 、 网 站 开发 、 数 据 库 设计 等 方面 。 整 套 书 具 有 以 下 几 个 特点 。 
面向 前 沿 科技 


无 论 是 网 站 建设 、 数 据 库 设计 还 是 HTML 5、CSS 3、JavaScript， 我 们 都 精 选 较为 前 沿 或 
者 用 户 群 最 大 的 领域 推进 ， 帮 助 大 家 认识 和 了 解 最 新 动态 。 


权威 的 作者 团队 


组 织 国家 重点 实验 室 和 资深 应 用 专家 联手 编著 该 套图 书 ， 融 合 丰富 的 教学 经 验 与 优秀 的 
管理 理念 。 


学 习 型 案例 设计 

以 技术 的 实际 应 用 过 程 为 主线 ， 全 程 采用 图 解 和 同步 多 媒体 结合 的 教学 方式 ， 生 动 、 直 
观 、 全 面 地 剖析 使 用 过 程 中 的 各 种 应 用 技能 ， 降 低 难度 以 提升 学 习 效 率 。 
为 什么 要 写 这 样 一 本 书 


随 着 网 络 的 发 展 ， 很 多 企 事业 单位 和 广大 网 民 对 于 建立 网 站 的 需求 越 来 越 强 烈 。 另 外 
对 于 大 中 专 院 校 ， 很 多 学 生 需 要 做 网 站 毕业 设计 ， 但 是 这 些 读者 又 不 懂 网 页 代码 程序 ， 不 知 
道 从 哪里 下 手 。 针 对 这 些 情况 ， 我 们 编写 了 本 书 ， 以 期 引导 读者 学 习 网 页 设计 和 网 站 建设 的 
全 面 知 识 。 通 过 本 书 的 实 训 ， 读 者 可 以 很 快 地 学 会 设计 网 页 和 开发 网 站 ， 提 高 职业 化 能 力 
从 而 帮助 解决 公司 与 求职 者 的 双重 需求 问题 。 


本 书 特色 

m 零 基 础 、 入 门 级 的 讲解 

无 论 您 是 否 从 事 计算 机 相关 行业 ， 无 论 您 是 否 接触 过 网 页 设计 和 动态 网 站 开发 ， 都 能 从 
本 书 中 找到 最 佳 起 点 。 

于 超 多 、 实 用 、 专 业 的 范例 和 项 目 

本 书 在 编排 上 紧密 结合 深入 学 习 网 页 制作 技术 的 先后 过 程 ， 从 网 页 设计 的 基本 概念 开 
始 ， 带 领 大 家 逐步 深入 地 学 习 各 种 应 用 技巧 ， 侧 重 实战 技能 ， 使 用 简单 易 懂 的 实际 案例 进行 
分 析 和 操作 指导 ， 让 读者 读 起 来 简明 轻松 ， 操 作 起 来 有 章 可 循 。 

”随时 检测 自己 的 学 习 成 果 

大 部 分 章 末 的 “疑难 解 惑 ” 板 块 ， 均 根据 本 章 内 容 精 选 而 成 ， 从 而 帮助 读者 解决 自学 过 
程 中 最 常见 的 疑难 问题 。 
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和 细致 入 微 、 贴 心 提示 


本 书 在 讲解 过 程 中 ， 在 各 章 中 使 用 了 “注意 ”“ 提 示 ”“ 技 巧 ” 等 小 贴 士 ， 使 读者 在 学 
习 过 程 中 更 清楚 地 了 解 相关 操作 、 理 解 相关 概念 ， 并 轻松 掌握 各 种 操作 技巧 。 


里 “专业 创作 团队 和 技术 支持 


您 在 学 习 过 程 中 遇 到 任何 问题 ， 可 加 入 QQ 群 (案例 课堂 VIP， 号 码 为 451102631) 进 行 提 
问 ， 专 家 人 员 会 在 线 答疑 。 


超 值 资源 大 放送 


全程 同步 教学 录像 


涵盖 本 书 所 有 知识 点 ， 详 细 讲 解 每 个 实例 及 项 目的 过 程 及 技术 关键 点 。 比 看 书 更 轻松 地 
掌握 书 中 所 有 的 动态 网 站 开发 的 知识 ， 而 且 扩 展 的 讲解 部 分 使 您 得 到 比 书 中 更 多 的 收获 。 


mm 超 多 容量 王牌 资源 


赠送 大 量 王牌 资源 ， 包 括 本 书 实例 源 代码 、 教 学 幻灯 片 、 本 书 精品 
教学 视频 、88 个 实用 类 网 页 模板 、12 部 网 页 开发 必 备 参考 手册 、11 个 精 
彩 JavaScript 案例 、Dreamweaver CC 快捷 键 速 查 手 册 、HTML 标签 速 查 
表 、 精 彩 网 站 配色 方案 赏析 、 网 页 样式 与 布局 案例 赏析 、CSS+Div 布局 
赏析 案例 、Web 前 端 工程 师 常见 面试 题 等 。 读 者 可 以 通过 QQ 群 (案例 课 
堂 VP， 号 码 为 431102631) 获 取 赠送 资源 ， 也 可 以 扫描 二 维 码 ， 下 载 本 书 
资源 。 


读者 对 象 


没有 任何 网 页 设计 和 网 站 建设 基础 的 初学 者 。 

有 一 定 的 网 页 设计 和 网 站 建设 的 基础 ， 想 精通 网 站 开发 的 人 员 。 
有 一 定 的 动态 网 站 开发 基础 ， 没 有 项 目 经 验 的 人 员 。 

正在 进行 毕业 设计 的 学 生 。 

大 专 院 校 及 培训 学 校 的 老师 和 学 生 。 


创作 团队 


本 书 由 刘 春 茂 编著 ， 参 加 编写 的 人 员 还 有 刘 玉 萍 、 张 金 伟 、 蒲 娟 、 周 佳 、 付 红 、 李 园 、 
郭 广 新 、 侯 永 岗 、 王 攀登 、 刘 海松 、 孙 若 淞 、 王 月 娇 、 包 慧 利 、 陈 伟 光 、 胡 同 夫 、 王 伟 、 展 
娜 娜 、 李 琪 、 梁 云 梁 和 周 浩 浩 。 在 编写 过 程 中 ， 我 们 竭尽 所 能 地 将 最 好 的 讲解 呈现 给 读者 ， 
但 也 难免 有 玻 漏 和 不 妥 之 处 ， 敬 请 不 音 指 正 。 若 您 在 学 习 中 遇 到 困难 或 疑问 ， 或 有 任何 建 
议 ， 可 写 信 至 信箱 357975357@qq.com。 
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第 1 章 
网 站 建设 入 门 一 
网 页 设计 与 网 站 

建设 基础 


网 页 设计 与 制作 是 整个 网 站 制作 中 的 一 个 重要 环节 。 相 对 于 传统 的 平面 设计 而 
言 ， 网 页 设计 具有 新 颖 性 和 更 多 的 表现 手法 。 本 章 主 要 介绍 网 页 和 网 站 的 基本 概念 


与 区 别 、 网 页 的 基本 组 成 、 什 么 是 静态 网 页 、 什 么 是 动态 网 页 等 知识 ， 让 读者 快速 
了 解 有 关 网 页 设计 与 网 站 建设 的 基本 知识 。 
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1.1 认识 网 页 和 网 站 


在 创建 网 站 之 前 ， 首 先 需要 认识 什么 是 网 页 、 什 么 是 网 站 ， 


面 介 绍 一 些 它们 的 相关 概念 。 
1.1.1 网 页 


以 及 网 站 的 种 类 与 特点 。 下 


网 页 是 Intemet( 国 际 互联 网 ， 也 称 因特网 ) 中 最 基本 的 信息 单位 ， 是 把 文字 、 图 形 、 声 音 
及 动画 等 各 种 多 媒体 信息 相互 连接 起 来 而 构成 的 一 种 信息 表达 方式 。 

通常 ， 网 页 中 有 文字 和 图 像 等 基本 信息 ， 有 些 网 页 中 还 有 声音 、 动 画 、 视 频 等 多 媒体 内 
容 。 网 页 一 般 由 站 标 、 导 航 栏 、 广 告 栏 、 信 息 区 、 版 权 区 等 部 分 组 成 ， 如 图 1-1 所 示 。 








在 访问 一 个 网 站 时 ， 首 先 看 到 的 网 页 一 般 称 为 该 网 站 的 首页 。 有 些 网 站 的 首页 只 是 网 站 
的 开场 页 ， 具 有 欢迎 访问 者 的 作用 ， 单 击 页 面 上 的 文字 或 图 片 ， 可 打开 网 站 的 主页 ， 而 首页 


也 随 之 关闭 ， 如 图 1-2 所 示 。 
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图 1-1 网 站 的 网 页 


网 站 的 主页 与 首页 的 区 别 在 于 : 主 
页 设 有 网 站 的 导航 栏 ， 是 所 有 网 页 的 链 








接 中 心 。 但 多 数 网 站 的 首页 与 主页 通常 
合 为 一 个 页 面 ， 即 省 略 了 首页 而 直接 显 
示 主 页 。 在 这 种 情况 下 ， 它 们 指 的 是 同 
一 个 页 面 ， 如 图 1-3 所 示 。 








1.1.2 网 站 


网 站 就 是 在 Intemet 上 通过 超级 链 
接 的 形式 构成 的 相关 网 页 的 集合 。 简 单 
地 说 ， 网 站 是 一 种 通信 工具 ， 人 们 可 以 
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党 平 计 务 要 作风 





现 扣 308 人 库 
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通过 网 页 浏览 器 来 访问 网 站 ， 获 取 自 己 


1-3 省略 首 页 的 网 站 


a 


需要 的 资源 或 享受 网 络 提供 的 服务 。 
例如 ， 人 们 可 以 通过 淘宝 网 查找 自己 需要 的 信息 ， 如 图 1-4 所 示 。 
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1-4 淘宝 网 


1.1.3 网 站 的 分 类 
按照 内 容 和 形式 的 不 同 ， 网 站 可 以 分 为 门户 网 站 、 职 能 网 站 、 专 业 网 站 和 个 人 网 站 4 类 。 
1. 门户 网 站 
门户 网 站 是 指 涉及 领域 非常 广泛 的 综合 性 网 站 ， 如 国内 著名 的 三 大 门户 网 站 : 网 易 、 搜 
狐 和 新 浪 。 图 1-5 所 示 为 网 易 的 首页 。 
2. 职能 网 站 


职能 网 站 是 指 一 些 公司 为 展示 其 产品 或 对 其 所 提供 的 售后 服务 进行 说 明 而 建立 的 网 站 。 
图 1-6 所 示 为 联想 集团 的 中 文官 方 网 站 。 
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3. 专业 网 站 

专业 网 站 是 指 专门 以 某 个 主题 为 内 容 而 建立 的 网 站 ， 这 种 网 站 都 是 以 某 一 题材 的 信息 作 
为 网 站 的 内 容 的 。 图 1-7 所 示 为 赶集 网 ， 该 网 站 主要 为 用 户 提供 租房 、 二 手 货 交 易 等 同城 相 
关 服 务 。 

4. 个 人 网 站 

个 人 网 站 是 指 由 个 人 开发 建立 的 网 站 ， 在 内 容 形 式 上 具有 很 强 的 个 性 化 特点 ， 通 常用 来 


宣传 自己 或 展示 个 人 的 兴趣 与 爱好 。 如 现在 比较 流行 的 淘宝 网 ， 在 淘宝 网 上 注册 一 个 账户 ， 
开 一 家 自己 的 小 店 ， 在 一 定 程度 上 就 宣传 了 自己 ， 展 示 了 个 人 兴趣 与 爱好 ， 如 图 1-8 所 示 。 
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图 1-7 专业 网 站 示例 图 1-8 个 人 网 站 示例 


1.2 ”认识 网 页 的 基本 组 成 


在 设计 网 页 之 前 ， 用 户 需 要 认识 网 页 有 哪些 组 成 部 分 。 通 常 ， 网 页 包括 网 址 、 网 页 标 
题 、Logo、 文 本 、 导 航 栏 、 超 链接 、 图 像 、 表 单 、 动 画 、 按 钮 等 内 容 ， 如 图 1-9 所 示 。 
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1.2.1 网 址 


网 址 是 指 互联 网 上 网 页 的 地 址 。 每 个 网 页 都 有 唯一 的 网 址 ， 在 浏览 器 的 地 址 栏 中 输入 该 
网 址 即 可 浏览 该 网 址 对 应 的 网 页 。 图 1-10 所 示 为 通过 网 址 访问 百度 。 
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图 1-10 ”通过 网 址 访问 网 页 


1.2.2 ”网 页 标题 


网 页 标题 是 对 一 个 网 页 的 高 度 概 括 。 通 常 而 言 ， 网 站 首页 的 标题 就 是 网 站 的 正式 名 称 ， 
如 图 1-11 所 示 。 在 网 页 的 HTML 代码 中 ， 网 页 标题 位 于 <head></head> 标 记 之 间 的 <title> 标 记 
之 中 ， 如 图 1-12 所 示 。 
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思 «it1e, NI /+it1e> 
<script> 
window.g_config = {appId:29,startTime: *new Date 
OF 
28 window._ju_config = { v 
图 1-11 网 页 标题 图 1-12 ”网 页 源 代码 


1.2.3 Logo 


网 络 中 的 Logo 是 网 站 的 标志 ， 主 要 用 于 与 其 他 网 站 交换 链接 ， 在 设计 和 制作 的 网 页 中 ， 
Logo 通常 用 图 像 和 动画 制作 。 图 1-13 所 示 为 携程 网 的 Logo。 
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1-13 ”网 页 Logo 信息 

















1.2.4 文本 
在 网 页 中 ， 文 本 内 容 是 网 页 中 信息 传递 的 主要 载体 ， 是 非常 重要 的 网 页 元 素 ， 如 图 1-14 
所 示 。 
Cd 
ma 后 有 
图 1-14 网 页 中 的 文本 信息 
1.2.5 图像 


图 像 是 网 页 中 的 主要 元 素 之 一 。 通 过 图 像 ， 不 仅 可 以 美化 网 页 的 外 观 ， 还 可 以 让 浏览 者 
更 直观 地 了 解 信息 ， 如 图 1-15 所 示 。 

















1-15 ”网 页 中 的 图 像 信 息 


1.2.6 导航 栏 


导航 栏 是 一 系列 导航 按钮 的 组 合 ， 其 作用 是 链接 到 各 个 页 面 ， 让 浏览 者 可 以 快速 找到 需 
要 的 资源 。 导 航 栏 一 般 位 于 网 页 的 顶端 或 左 侧 ， 如 图 1-16 所 示 。 另 外 ， 导 航 栏 中 主要 有 水 平 
导航 栏 和 垂直 导航 栏 两 种 。 要 制作 导航 栏 ， 用 户 可 以 使 用 文本 、 图 像 、 按 钮 、 动 画 等 网 页 元 
素来 实现 。 图 1-17 所 示 为 网 页 中 的 垂直 导航 栏 。 
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图 1-16 网 页 中 的 导航 栏 图 1-17 垂直 导航 栏 


1.2.7” 超 链接 


超 链 接 是 网 页 中 的 一 个 重要 组 成 部 分 ， 通 过 它 可 以 快速 跳 转 到 当前 网 站 的 另 一 个 页 面 ， 
或 者 另 一 个 网 站 的 某 个 页 面 。 只 有 通过 超 链接 将 各 个 页 面 组 织 在 一 起 ， 才 能 真正 构成 一 个 网 
站 。 在 网 页 中 ， 将 鼠标 指针 移动 到 某 对 象 上 ， 鼠 标 指 针 变 为 手 形 形 状 ， 说 明 该 对 象 是 超 链 
接 ， 如 图 1-18 所 示 。 
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1-18 ”网 页 中 的 超 链接 


1.2.8 表单 
在 网 页 中 ， 表 单 主要 用 于 数据 采集 ， 如 收集 用 户 填写 的 注册 资料 ， 搜 集 用 户 的 反馈 信 
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， 获 取 用 户 登 录 的 用 户 名 和 密码 ， 如 图 1-19 所 示 。 


a 2017-08-13 


a 2017-08-20 





1-19 ”网 页 中 的 表单 
1.2.9 动画 


页 中 的 动画 可 以 是 GIF 格式 的 ， 还 可 以 是 Flash 动画 。 尤 其 是 Flash 动画 ， 由 于 其 占用 
的 存储 空间 很 小 ， 而 且 可 以 与 动态 网 页 和 数据 库 进行 信息 交互 ， 所 以 它 非常 适合 在 网 页 中 使 
用 。 图 1-20 所 示 为 网 页 中 的 动画 。 
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图 1-20 ”网 页 中 的 动画 


1.2.10 Banner 


Banner 是 网 页 中 的 一 种 元 素 ， 它 可 以 作为 网 站 页 面 的 横幅 广告 或 者 宣传 网 页 内 容 等 。 在 
网 页 设计 中 ， 该 部 分 是 嵌入 页 面 中 的 ， 通 过 采用 图 像 或 者 动画 制作 。 1-21 所 示 为 苏宁 易 购 
中 的 Banner 广告 。 
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1-21 网 页 中 的 Banner 广告 


:3 认识 静态 网 页 与 动态 网 页 


网 页 是 构成 网 站 的 基本 元 素 ， 是 承载 各 种 网 站 应 用 的 平台 ， 是 包含 文字 与 图 片 的 HTML 
格式 的 文件 。 网 页 又 可 以 分 为 静态 网 页 与 动态 网 页 。 


1.3.1 静态 网 页 


静态 网 页 是 指 没有 后 台数 据 库 、 不 含 程序 和 不 可 交互 的 标准 HIML 文件 ， 其 文件 扩展 名 
为 .htm 或 :html。 图 1-22 所 示 为 一 个 静态 网 页 。 
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图 1-22 静态 网 页 


1.3.2 ”动态 网 页 


动态 网 页 是 指 采 用 了 动态 网 站 技术 且 可 交互 的 网 页 ， 其 文件 扩展 名 种 类 繁多 ， 常 见 的 
有 .aspx、.asp、.php、-:jsp 等 。 图 1-23 所 示 为 一 个 动态 网 页 。 
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1-23 ”动态 网 页 
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1.4 网 站 建设 的 相关 概念 


在 网 站 建设 的 过 程 中 ， 经 常会 接触 到 很 多 和 网 络 有 关 的 概念 ， 如 浏览 器 、URL、FTP、IP 
地 址 、 域 名 等 ， 理 解 了 这 些 概念 ， 对 网 站 建设 会 有 一 定 的 帮助 。 


1.4.1 因特网 与 万 维 网 


因特网 (Internet) 又 称 国际 互联 网 ， 是 一 个 把 分 布 于 世界 各 地 的 计算 机 用 传输 介质 互相 连 
接 起 来 的 网 络 。Internet 主要 提供 的 服务 有 万 维 网 (WWW)、 文 件 传输 协议 (FTP)、 电 子 邮 件 (E- 
mail)、 远 程 登录 (Telnet) 等 。 

万 维 网 (World Wide Web，WWW) 简 称 为 3W， 它 是 无 数 个 网 络 站 点 和 网 页 的 集合 ， 也 是 
Internet 提供 的 最 主要 的 服务 。 它 是 由 大 量 多 媒体 内 容 连 接 而 形成 的 集合 。 通 常 ， 我 们 上 网 看 
到 的 内 容 就 是 万 维 网 的 内 容 。 如 图 1-24 所 示 为 使 用 万 维 网 打开 的 百度 首页 。 
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1-24 ”百度 首页 


1.4.2 ”浏览 器 与 HTML 


浏览 器 是 将 互联 网 上 的 文本 文档 (或 其 他 类 型 的 文件 ) 翻 译 成 网 页 ， 并 让 用 户 与 这 些 文件 交 
互 的 一 种 软件 工具 ， 主 要 用 于 查看 网 页 的 内 容 。 目 前 最 常用 的 浏览 器 有 IE、Firefox、Opera 
等 。 如 图 1-25 所 示 是 使 用 正 浏览 器 打开 的 页 面 。 

HTML(HyperText Markup Language) 即 超 文 本 标记 语言 ， 是 一 种 用 来 制作 超 文本 文档 的 简 
单 标记 语言 ， 也 是 制作 网 页 的 最 基本 的 语言 ， 它 可 以 直接 由 浏览 器 执行 。 图 1-26 所 示 为 使 用 
HTML 语言 制作 的 页 面 。 
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1-25 使 用 IE 浏览 器 打开 的 页 面 


1.4.3 ” URL、 域名 与 IP 地 址 


URL(Uniform Resource Locator) 即 统一 资源 定位 器 ， 也 就 是 网 络 地 址 ， 是 在 Internet 上 用 
来 描述 信息 资源 ， 并 将 Internet 提供 的 服务 统一 编 址 的 系统 。 简 单 来 说 ， 通 常 在 下 等 浏览 器 


1-26 使 用 HTML 语言 制作 的 页 面 


中 输入 的 网 址 就 是 URL 的 一 种 ， 如 百度 网 址 http://www.baidu.com。 


域名 (Domain Name) 类 似 于 Intermet 上 的 门牌 号 ， 是 用 于 识别 和 定位 互联 网 上 计算 机 的 层 
次 结构 的 字符 标识 ， 与 该 计算 机 的 因特网 协议 QP) 地 址 相对 应 。 但 相对 于 IP 地 址 而 言 ， 域 名 
更 便于 使 用 者 理解 和 记忆 。URL 和 域名 是 两 个 不 同 的 概念 ， 如 http:/www.sohu.comy/ 是 
URL( 访 问 此 网 址 可 打开 如 图 1-27 所 示 的 搜狐 首页 ， 访 问 时 间 不 同 ， 其 页 面 内 容 会 有 所 不 





同 )， 而 www.sohu.com 是 域名 。 
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1-27 ”搜狐 首页 


JP(Intermet Protocol) 即 因特网 协议 ， 是 为 计算 机 网 络 相 互 连 接 进行 通信 而 设计 的 协议 ， 是 
计算 机 在 因特网 上 进行 相互 通信 时 应 当 遵守 的 规则 。 了 王 地 址 是 给 因特网 上 的 每 台 计 算 机 和 其 
他 设备 分 配 的 一 个 唯一 的 地 址 。 使 用 ipconfig 命令 可 以 查看 本 机 的 IP 地 址 ， 如 图 1-28 所 示 。 
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图 1-28 使 用 ipconfig 命令 查看 IP 地 址 


1.4.4 上 传 和 下 载 


上 传 (Upload) 是 从 本 地 计算 机 (一 般 称 客户 端 ) 向 远程 服务 器 (一 般 称 服务 器 端 ) 传 送 数 据 的 


行为 和 过 程 。 下 载 (Download) 是 从 远程 服务 器 取 回 数据 到 本 地 计算 机 的 过 程 。 


1.5 疑难 解 惑 


疑问 1: 为 什么 网 页 风格 要 统一 ? 


答 : 网 页 上 所 有 的 图 像 、 文 字 ， 包 括 背 景 颜色 、 区 分 线 、 字 体 、 标 题 、 注 脚 等 元 素 ， 要 
-风格 ， 贯 穿 全 站 ， 这 样 网 站 看 起 来 舒服 、 顺 畅 ， 才 会 给 用 户 留 下 专业 的 印象 。 


疑问 2: 为 什么 网 站 建 好 之 后 还 需要 维护 ? 
答 : 网 站 维护 的 主要 内 容 就 是 不 断 更 新 网 站 内 容 。 因 为 企业 在 不 断 发 展 ， 所 以 网 站 也 需 


要 不 断 更 新 。 企 业 通过 更 新 网 站 可 以 将 企业 最 新 的 进展 和 成 果 对 外 展示 ， 而 浏览 者 通过 网 站 
不 断 更 新 的 内 容 可 以 感受 到 企业 的 存在 和 活力 。 


第 2 章 
第 一 视觉 最 重要 一 一 
网 站 配色 与 布局 


一 个 网 站 能 否 成 功 ， 很 大 程度 上 取决 于 网 页 的 结构 与 配色 。 因 此 ， 在 学 习 制 作 
动态 网 站 之 前 ， 首 先 需要 掌握 网 站 结构 与 网 页 配色 的 相关 基础 知识 。 本 章 介绍 的 内 
容 包 括 网 页 配色 的 相关 技巧 、 网 站 结构 的 布局 ， 以 及 网 站 配色 的 经 典 案 例 等 。 
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2.1 善 用 色彩 设计 网 页 


经 研究 发 现 ， 当 用 户 第 一 次 打开 某 个 网 站 时 ， 给 用 户 留 下 第 一 印象 的 既 不 是 网 站 的 内 
容 ， 也 不 是 网 站 的 版 面 布局 ， 而 是 网 站 具有 冲击 力 的 色彩 ， 如 图 2-1 所 示 。 





图 2-1 网 页 色彩 搭配 


色彩 的 魅力 是 无 限 的 ， 它 可 以 让 本 身 很 平淡 无 味 的 东西 瞬间 变 得 漂亮 起 来 。 作 为 最 具 说 
服 力 的 视觉 语言 ， 作 为 最 强烈 的 视觉 冲击 ， 色 彩 在 人 们 的 生活 中 起 着 先 声 夺 人 的 作用 。 因 
此 ， 作 为 一 名 优秀 的 网 页 设计 师 ， 不 仅 要 掌握 基本 的 网 站 制作 技术 ， 还 要 掌握 网 站 的 配色 风 
格 等 设计 艺术 。 


2.1.1 认识 色彩 


为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 需 要 先 了 解 色彩 的 一 些 基本 概念 。 自 然 界 中 有 很 多 
种 色彩 ， 比 如 玫瑰 是 红色 的 ， 大 海 是 蓝 色 的 ， 橘 子 是 橙色 的 …… 但 是 最 基本 的 色彩 有 3 种 
( 红 、 绿 、 蓝 )， 其 他 的 色彩 都 可 以 由 这 3 种 色彩 调和 而 成 。 这 三 种 色彩 被 称 为 “三 原 
色 ”， 如 图 2-2(a) 所 示 。 

现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩 色 。 其 中 黑 、 白 、 灰 属于 非 彩色 系列 ， 其 他 色彩 
都 属于 彩色 系列 。 任 何 一 种 彩色 的 色彩 都 具备 色相 、 明 度 和 纯度 3 个 特征 。 而 非 彩色 的 色彩 
只 具有 明度 属性 。 


1. 色相 


色相 指 的 是 色彩 的 名 称 。 这 是 色彩 的 最 基本 特征 ， 是 一 种 色彩 区 别 于 另 一 种 色彩 的 最 主 
要 因素 。 比 如 ， 紫 色 、 绿 色 、 黄 色 等 都 代表 了 不 同 的 色相 。 同 一 色相 的 色彩 ， 通 过 调整 亮度 
或 者 纯度 ， 就 很 容易 搭配 ， 如 图 2-2(b) 所 示 。 


2. 明度 


明度 也 叫 亮度 ， 是 指 色彩 的 明暗 程度 。 明 度 越 大 ， 色 彩 越 亮 ， 如 一 些 购物 、 儿 童 类 网 
站 ， 用 的 是 一 些 鲜亮 的 颜色 ， 让 人 感觉 绚丽 多 姿 、 生 气 勃 勃 。 明 度 越 低 ， 颜 色 越 暗 。 低 明度 
的 色彩 主要 用 于 一 些 充满 神秘 感 的 游戏 类 网 站 ， 以 及 一 些 为 了 体现 个 人 的 孤僻 或 者 忧郁 等 性 


格 的 个 人 网 站 。 
有 明度 差 的 色彩 更 容易 调和 ， 例 如 ， 紫 色 (#993399) 与 黄色 (#fFff00)， 上 暗 红 (#cc3300) 与 草绿 
(#99cc00)， 暗 蓝 (#0066cc) 与 梅 色 (#ff9933) 等 。 色彩 的 明度 如 图 2-3 所 示 。 
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图 2-3 色彩 的 明度 


3. 纯度 
纯度 是 指 色彩 的 鲜艳 程度 。 纯 度 高 的 色彩 颜色 鲜亮 ， 纯 度 低 的 色彩 颜色 暗淡 发 灰 。 


2.1.2 ”确定 网 站 的 主题 色 


一 个 网 站 一 般 不 使 用 单一 颜色 ， 因 为 会 让 人 感觉 单调 、 乏 味 ; 但 也 不 能 将 所 有 的 颜色 都 
运用 到 网 站 中 ， 让 人 感觉 不 庄重 。 一 个 网 站 必须 围绕 一 种 或 两 种 主题 色 进 行 设计 ， 这 样 既 不 
至 于 让 客户 迷失 方向 ， 也 不 至 于 让 客户 感到 单调 、 乏 味 。 因 此 ， 确 定 网 站 的 主题 色 是 设计 者 
必须 考虑 的 问题 之 一 。 


1. 主题 色 确定 的 两 个 方面 


在 确定 网 站 主题 色 时 ， 通 常 可 以 从 以 下 两 个 方面 去 考虑 。 

1) ”结合 产品 、 内 容 特 点 

应 该 根据 产品 的 特点 来 确定 网 站 的 主 色调 。 如 果 企 业 产 品 是 环保 型 的 ， 可 以 采用 绿色 。 
如 果 企业 主 营 的 产品 是 高 科技 或 电子 类 的 可 以 采用 蓝 色 等 。 如 果 是 红酒 企业 ， 则 可 以 考虑 使 
用 红酒 的 色调 。 图 2-4 所 示 是 商业 网 站 的 一 种 色彩 搭配 。 
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图 2-4 商业 网 站 色彩 的 搭配 
2) “根据 企业 的 VI 识别 系统 
如 今 有 很 多 公司 都 有 自己 的 VI 识别 系统 ， 从 公 


看 得 到 ， 这 些 都 是 公司 沉淀 下 来 的 企业 文化 。 网 站 作为 企业 的 宣传 方式 之 一 ， 也 在 一 定 程度 
上 需要 考虑 这 些 因素 。 


AN 司 的 名 片 、 办 公 室 的 装修 、 手 提 袋 等 可 以 


2. 主题 色 的 设计 原则 


在 主题 色 确 定时 我 们 还 要 考虑 如 下 原则 ， 这 样 设计 出 的 网 站 界面 才能 别出心裁 ， 体 现 出 
企业 的 独特 风格 ， 更 有 利于 向 受众 传递 企业 信息 。 

1) 与 众 不 同 ， 富 有 个 性 

过 去 许多 网 站 都 喜欢 选择 与 竞争 对 手 的 网 站 相近 的 颜色 ， 试 图 通过 这 样 的 策略 来 快速 实 
现 网 站 构建 ， 减 少 建站 成 本 ， 但 这 种 建站 方式 鲜 有 成 功 者 。 网 站 的 主题 色 一 定 要 与 竞争 网 站 
能 明显 地 区 别 开 ， 只 有 与 众 不 同 、 别 具 一 格 才 是 成 功 之 道 。 这 是 网 站 主题 色 选择 的 首要 原 
则 。 如 今 越 来 越 多 的 网 站 规划 者 开始 认识 到 这 个 真理 。 比 如 ， 中 国联 通 已 经 改变 过 去 模仿 中 
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2-5 ”以 橘 色 为 标准 色 的 中 国联 通 网 页 


2) “符合 大 众 审美 习惯 

由 于 大 众 的 色彩 偏好 非常 复杂 ， 而 且 是 多 变 的 ， 甚 至 是 瞬息 万 变 的 ， 因 此 要 选择 最 能 吻合 
大 众 偏好 的 色彩 是 非常 困难 的 ， 甚 至 是 不 可 能 的 。 最 好 的 办 法 是 剔除 掉 大 众 所 禁 忌 的 颜色 。 
比如 ， 巴 西 人 忌讳 棕 黄色 和 紫色 ， 他 们 认为 棕 黄 色 使 人 绝望 ， 紫 色 会 带 来 悲哀 ， 紫 色 和 黄色 
配 在 一 起 ， 则 是 患 病 的 预兆 。 因 此 ， 在 选择 网 站 主题 色 时 要 考虑 你 的 用 户 群 体 的 审美 习惯 。 


2.1.3 网 页 中 色彩 的 搭配 


色彩 在 人 们 的 生活 中 带 有 丰富 的 感情 和 含义 。 在 特定 的 场合 下 ， 同 种 色彩 可 以 代表 不 同 
的 含义 。 色 彩 总 的 应 用 原则 应 该 是 “总 体 协 调 ， 局 部 对 比 ”， 即 主页 的 整体 色彩 效果 是 和 谐 
的 ， 局 部 、 小 范围 的 地 方 可 以 配 一 些 对 比 强烈 的 色彩 。 在 色彩 的 运用 上 ， 可 以 根据 主页 内 容 
的 需要 ， 分 别 采 用 不 同 的 主 色调 。 

色彩 具有 象征 性 ， 如 嫩绿 色 、 浴 绿色 、 金 黄色 、 灰 褐色 分 别 象征 春 、 夏 、 秋 、 冬 。 其 次 
还 有 职业 的 标志 色 ， 如 军用 的 橄榄 绿 、 医 疗 卫 生 的 白色 等 。 色 彩 还 具有 明显 的 心理 感觉 ， 如 
冷 、 暧 的 感觉 ， 进 、 退 的 效果 等 。 另 外 ， 色 彩 还 具有 民族 性 。 各 个 民族 由 于 环境 、 文 化 、 传 
统 等 因素 的 影响 ， 对 于 色彩 的 喜好 也 存在 着 较 大 的 差异 。 


1. 色彩 的 搭配 


充分 运用 以 下 色彩 的 这 些 特性 ， 可 以 使 网 站 的 主页 具有 深刻 的 艺术 内 涵 ， 从 而 提升 主页 
的 文化 品位 。 

(1) 相近 色 。 相 近 色 即 色 环 中 相 邻 的 3 种 颜色 。 相 近 色 的 搭配 给 人 的 视觉 效果 很 舒适 、 
很 自然 ， 所 以 相近 色 在 网 站 设计 中 极为 常用 。 

(2) 互补 色 。 互 补 色 即 色 环 中 相对 的 两 种 色彩 。 对 互补 色调 整 一 下 补 色 的 亮度 ， 有 时 是 
一 种 很 好 的 搭配 。 

(3) 上 暖色。 暖色 与 黑色 搭配 ， 一 般 应 用 于 购物 类 网 站 、 电 子 商 务 网 站 、 儿 童 类 网 站 等 ， 
用 以 体现 商品 的 琳琅 满目 或 网 站 的 活泼 、 温 馨 等 效果 ， 如 图 2-6 所 示 。 

(4) 冷色。 冷色 一 般 与 白色 搭配 ， 一 般 应 用 于 一 些 高 科技 、 游 戏 类 网 站 ， 主 要 表达 严 
肃 、 稳 重 等 效果 ， 如 图 2-7 所 示 。 绿 色 、 蓝 色 、 蓝 紫色 等 都 属于 冷色 系列 。 
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图 2-6 暖色 色 系 的 网 页 图 2-7 冷色 色 系 的 网 页 
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(5) 色彩 均衡 。 网 站 要 让 人 看 上 去 舒适 、 协 调 ， 除 了 文字 、 图 片 等 内 容 的 排版 合理 外 ， 
色彩 均衡 也 是 相当 重要 的 一 个 部 分 。 比 如 ， 一 个 网 站 不 可 能 单一 地 运用 一 种 颜色 ， 所 以 色彩 
的 均衡 问题 是 设计 者 必须 要 考虑 的 问题 。 

2. 非 彩 色 的 搭配 - 柯 

黑色 与 白色 措 配 是 最 基本 和 最 简单 的 措 配 ， ga | / 





无 论 是 白字 黑 底 还 是 黑 字 白 底 都 非常 清晰 明了 。 Se 
灰色 是 万 能 色 ， 可 以 和 任何 色彩 搭配 ， 也 可 以 帮 

助 两 种 对 立 的 色彩 和 谐 过 渡 。 如 果 在 网 页 设计 中 区 
实在 找 不 出 合适 的 搭配 色彩 ， 那 么 可 以 尝试 用 灰 
色 ， 效 果 绝对 不 会 太 差 。 黑 白色 系 的 网 页 如 图 2-8 
所 示 。 


2.1.4 网 页 元 素 的 色彩 搭配 


为 了 让 网 页 设计 得 更 亮丽 、 更 舒适 ， 增 强 页 图 2-8 黑白 色 系 的 网 页 
面 的 可 阅读 性 ， 必 须 合 理 、 恰 当地 运用 页 面 各 元 
素 间 的 色彩 搭配 。 


1. 网 页 导航 条 


网 页 导航 条 是 网 站 的 指 路 方向 标 ， 浏 览 者 在 网 页 间 的 跳 转 、 了 解 网 站 的 结构 、 查 看 网 站 
的 内 容 ， 都 必须 使 用 导航 条 。 导 航 条 的 色彩 搭配 ， 可 以 使 用 稍微 具有 跳跃 性 的 色彩 吸引 浏览 
者 的 视线 ， 使 其 感觉 网 站 清晰 明了 、 层 次 分 明 ， 如 图 2-9 所 示 。 
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图 2-9 网 页 导航 条 的 色彩 搭配 
2. 网 页 链接 
一 个 网 站 不 可 能 只 有 一 页 ， 所 以 文字 与 图 片 的 链接 是 网 站 中 不 可 缺少 的 部 分 。 尤 其 是 文 
字 链 接 ， 因 为 文字 链接 有 别 于 一 般 文 字 ， 所 以 文字 链接 的 颜色 不 能 与 文字 的 颜色 一 样 。 要 让 


浏览 者 快速 地 找到 网 站 链接 ， 设 置 独特 的 文字 链接 颜色 是 一 种 促使 浏览 者 点 击 链接 的 好 办 
法 ， 如 图 2-10 所 示 。 


他 和 Es 文明 了 ms 





图 2-10 ”网 页 链接 的 色彩 搭配 


U 


3. 网 页 文字 


如 果 网 站 中 使 用 了 背景 颜色 ， 就 必须 考虑 背景 颜色 的 用 色 与 前 景 文字 的 色彩 措 配 问题 。 
一 般 的 网 站 侧重 的 是 文字 ， 所 以 背景 的 颜色 可 以 使 用 纯度 或 者 明度 较 低 的 色彩 ， 而 文字 的 颜 
色 可 以 使 用 较为 突出 的 亮色 ， 让 人 一 目 了 然 。 


4. 网 站 标志 
网 站 标志 是 宣传 网 站 最 重要 的 部 分 之 一 ， 所 以 网 站 标志 在 页 面 上 一 定 要 突出 、 醒 目 ， 可 


以 将 Logo 和 Banner 做 得 鲜亮 一 些 。 也 就 是 说 ， 在 色彩 搭配 方面 网 站 标志 的 色彩 要 与 网 页 的 
主题 色彩 分 离开 。 有 时 为 了 更 突出 ， 也 可 以 使 用 与 主题 色相 反 的 颜色 ， 如 图 2-11 所 示 。 
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图 2-11 网 站 标志 的 色彩 搭配 
2.1.5 网 页 色彩 搭配 的 技巧 


色彩 搭配 是 一 门 艺术 ， 灵 活 地 运用 它 能 让 网 站 的 主页 更 具 亲 和 力 。 要 想 制作 出 漂亮 的 主 
页 ， 在 灵活 运用 色彩 的 基础 上 还 需要 加 上 自己 的 创意 和 技巧 。 下 面 详细 介绍 网 页 色彩 搭配 的 
一 些 常用 技巧 。 


1. 单 色 的 使 用 


尽管 网 站 设计 要 避免 采用 单一 的 色彩 ， 以 免 产 生 单调 的 感觉 ， 但 通过 调整 单一 色彩 的 饱 
和 度 与 透明 度 ， 也 可 以 使 网 站 色彩 产生 变化 ， 让 网 站 避免 单调 ， 做 到 色彩 统一 、 有 层次 感 ， 
如 图 2-12 所 示 。 


2. 邻近 色 的 使 用 


所 谓 邻 近 色 ， 就 是 色 带 上 相 邻近 的 颜色 ， 如 绿色 和 蓝 色 、 红 色 和 黄色 就 互 为 邻近 色 。 采 
用 邻近 色 设 计 网 页 可 以 使 网 页 避免 色彩 杂乱 ， 易 于 使 页 面色 彩 达 到 丰富 、 和 谐 统 一 ， 如 
图 2-13 所 示 。 


3. 对 比 色 的 使 用 
对 比 色 可 以 突出 重点 ， 产 生 强 烈 的 视觉 效果 。 通 过 合理 使 用 对 比 色 ， 能 够 使 网 站 特色 鲜 
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明 、 重 点 突出 。 在 设计 时 ， 一 般 以 一 种 颜色 为 主 色调 ， 将 对 比 色 作为 点 级 ， 可 以 对 设计 起 到 
画龙点睛 的 作用 。 


sekerden daha tatl ] A 
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图 2-12 单 色 的 使 用 示例 图 2-13 邻近 色 的 使 用 示例 
4. 黑色 的 使 用 


黑色 是 一 种 特殊 的 颜色 ， 如 果 使 用 恰当 、 设 计 合 理 ， 往 往 能 产生 很 强 的 艺术 效果 。 黑 色 
一 般 用 来 作为 背景 色 ， 与 其 他 纯度 色彩 搭配 使 用 。 


5. 背景 色 的 使 用 


背景 颜色 不 要 太 深 ， 和 否则 会 显得 过 于 厚重 ， 而 且 还 会 影响 整个 页 面 的 显示 效果 。 在 设计 
时 ， 一 般 采 用 素 淡 清雅 的 色彩 ， 避 免 采 用 花纹 复杂 的 图 片 和 纯度 很 高 的 色彩 作为 背景 色 ， 同 
时 ， 背 景色 要 与 文字 的 色彩 对 比 强烈 一 些 。 但 也 有 例外 ， 使 用 黑色 的 背景 衬托 亮丽 的 文本 和 
图 像 ， 则 会 给 入 一 种 另类 的 感觉 。 背 景色 的 使 用 示例 如 图 2-14 所 示 。 
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2-14 ”背景 色 的 使 用 示例 


6. 色彩 的 数量 
一 般 初学 者 在 设计 网 页 时 往往 会 使 用 多 种 颜色 ， 使 网 页 变 得 很 “ 花 ”， 缺 乏 统一 和 协 


调 ， 缺 乏 内 在 的 美感 ， 给 人 一 种 繁杂 的 感觉 。 事 实 上 ， 网 站 用 色 并 不 是 越 多 越 好 ， 一 般 应 控 
制 在 4 种 色彩 以 内 ， 可 以 通过 调整 色彩 的 各 种 属性 来 使 网 页 产生 颜色 上 的 变化 ， 从 而 保持 整 
个 网 页 的 色调 统一 。 

7. 要 和 网 站 内 容 匹 配 


了 解 网 站 所 要 传达 的 信息 和 品牌 ， 选 择 可 以 加 强 这 些 信 息 的 颜色 。 比 如 ， 在 设计 一 个 强 
调 稳健 的 金融 机 构 时 ， 就 要 选择 冷色 系 ， 用 柔和 的 蓝 、 灰 或 绿色 。 如 果 使 用 暖色 系 或 活泼 的 
颜色 ， 可 能 会 破坏 该 网 站 的 品牌 。 


8. 围绕 网 页 主题 


色彩 要 能 烘托 出 主题 。 根 据 主题 确定 网 站 颜色 ， 同 时 还 要 考虑 网 站 的 访问 对 象 ， 文 化 的 
差异 也 会 使 色彩 产生 非 预期 的 反应 。 还 有 ， 不 同 地 区 与 不 同年 龄 层 对 颜色 的 反应 也 会 有 所 不 
同 。 年 轻 人 一 般 比 较 喜 欢 饱和 色 ， 但 这 样 的 颜色 引 不 起 高 龄 人 群 的 兴趣 。 

此 外 ， 白 色 是 网 站 用 得 最 普遍 的 一 种 颜色 。 很 多 网 站 甚至 留 出 大 块 的 白色 空间 ， 作 为 网 
站 的 一 个 组 成 部 分 ， 这 就 是 留 白 艺术 。 很 多 设计 性 网 站 较 多 地 运用 留 白 艺术 ， 给 人 一 个 遐想 
的 空间 ， 让 人 感觉 心情 舒适 、 畅 快 。 因 此 ， 人 恰当 的 留 白 对 于 协调 页 面 的 均衡 会 起 到 相当 大 的 
作用 ， 如 图 2-15 所 示 。 

总 之 ， 色 彩 的 使 用 并 没有 一 定 的 法 则 ， 如 果 一 定 要 用 某 个 法 则 去 套 ， 则 效果 只 会 适 得 其 
反 。 色 彩 的 运用 还 与 每 个 人 的 审美 观 、 个 人 喜好 、 知 识 层 次 等 密切 相关 。 一 般 应 先 确定 一 种 
能 体现 主题 的 主体 色 ， 然 后 根据 具体 的 需要 通过 近似 和 对 比 的 手段 来 完成 整个 页 面 的 配色 方 
案 。 整 个 页 面 在 视觉 上 应 该 是 一 个 整体 ， 以 达到 和 谐 、 悦 目的 视觉 效果 ， 如 图 2-16 所 示 。 
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图 2-15 ”网 页 留 白 的 处 理 效果 图 2-16 网 页 色彩 的 搭配 


2.2 常见 的 网 站 布局 结构 


在 规划 网 站 的 页 面前 ， 对 所 要 创建 的 网 站 要 有 充分 的 认识 和 了 解 。 大 量 的 前 期 准备 工作 
可 使 设计 者 在 规划 网 页 时 胸有成竹 ， 得 心 应 手 ， 一 路 畅行 。 在 网 站 中 网 页 布局 大 致 可 分 为 
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“ 国 ” 字 型 、 标 题 正文 型 、 左 右 框 架 型 、 上 下 框架 型 、 综 合 框架 型 、 封 面 型 、Flash 型 等 。 
D9 “ 国 ” 字 型 





“ 国 ” 字 型 也 可 以 称 为 “ 同 ” 字 型 ， 它 是 布局 一 些 大 型 网 站 时 常用 的 一 种 结构 类 型 ， 即 
网 页 最 顶端 是 网 站 的 标题 和 横幅 广告 条 ， 接 下 来 是 网 站 的 主要 内 容 。 网 页 左右 分 列 一 些 内 容 
条 目 ， 中 间 是 主要 部 分 ， 与 左右 一 起 罗列 到 底 。 最 下 方 是 网 站 的 一 些 基本 信息 、 联 系 方式 、 
版 权 声明 等 。 这 种 结构 几乎 是 网 上 使 用 最 多 的 一 种 结构 类 型 ， 如 图 2-17 所 示 。 
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图 2-17 “ 国 ” 字 型 网 页 结构 示例 
2.2.2 ”标题 正文 型 


标题 正文 型 即 网 页 最 上 方 是 标题 或 类 似 的 一 些 东西 ， 下 方 是 正文 ， 如 图 2-18 所 示 。 一 些 
网 站 的 文章 页 面 或 注册 页 面 等 采用 的 就 是 这 种 类 型 。 





图 2-18 ”标题 正文 型 网 页 结构 示例 


2.2.3 左右 框架 型 


左右 框架 型 是 一 种 左右 分 布 的 框架 结构 。 一 般 来 说 ， 左 侧 是 导航 链接 ， 有 时 最 上 方 会 有 
一 个 小 的 标题 或 标志 ， 右 侧 是 正文 。 大 部 分 的 大 型 论坛 采用 的 都 是 这 种 结构 ， 有 一 些 企 业 网 
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站 也 喜欢 采用 这 种 结构 。 这 种 类 型 的 结构 非常 清晰 ， 一 目 了 然 ， 如 图 2-19 所 示 。 
2.2.4 上 下 框架 型 


上 下 框架 型 与 左右 框架 型 类 似 ， 区 别 仅 在 于 这 是 一 种 分 为 上 下 两 部 分 的 框架 ， 如 图 2-20 
所 示 。 
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图 2-19 左右 框架 型 网 页 结构 示例 图 2-20 上 下 框架 型 网 页 结构 示例 


2.2.5 ”综合 框架 型 
综合 框架 型 是 多 种 结构 的 结合 ， 是 相对 复杂 的 一 种 框架 结构 ， 如 图 2-21 所 示 。 


we 








图 2-21 综合 框架 型 网 页 结构 示例 
2.2.6 封面 型 


封面 型 网 页 结构 基本 上 出 现在 一 些 网 站 的 首页 ， 大 部 分 为 一 些 精美 的 平面 设计 与 一 些小 
的 动画 相 结合 ， 放 上 几 个 简单 的 链接 ， 或 者 仅 是 一 个 进入 链接 ， 甚 至 直接 在 首页 的 图 片上 做 
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链接 而 没有 任何 提示 。 这 种 类 型 大 部 分 出 现在 企业 网 站 和 个 人 主页 。 如 果 处 理 得 好 ， 则 会 给 
人 带 来 赏心悦目 的 感觉 。 图 2-22 所 示 是 一 种 封面 型 网 页 结构 。 





2-22 封面 型 网 页 结构 示例 
2.2.7 Flash 型 


其 实 Flash 型 网 页 结构 与 封面 型 结构 是 类 似 的 ， 只 是 这 种 类 型 采用 了 目前 非常 流行 的 
Flash。 与 封面 型 不 同 的 是 ， 由 于 Flash 具有 强大 的 功能 ， 所 以 页 面 所 表达 的 信息 更 丰富 。 它 
的 视觉 效果 及 听觉 效果 如 果 处 理 得 当 ， 绝 不 亚 于 传统 的 多 媒体 。 图 2-23 所 示 是 一 种 Flash 型 
网 页 结构 。 





图 2-23 ”Flash 型 网 页 结构 示例 


2.3 网 站 的 色彩 应 用 案例 
在 了 解 了 网 页 色彩 的 搭配 原理 与 技巧 后 ， 下 面 介 绍 一 些 网 站 的 色彩 搭配 应 用 案例 。 


2.3.1 案例 1 一 一 网 络 购物 类 网 站 的 色彩 应 用 
网 络 购物 类 网 站 一 般 不 仅 要 体现 出 文化 的 时 尚 ， 而 且 还 要 体现 出 品牌 的 时 尚 。 通 常情 况 下 ， 


妇 


说 起 具有 品牌 时 尚 的 女性 服装 和 鞋子 ， 人 们 脑海 中 不 自觉 地 就 会 涌现 出 红色 、 紫 色 及 粉红 色 。 因 
为 这 些 颜色 已 经 成 为 女性 的 专用 色彩 ， 所 以 典型 的 女性 服饰 都 常 以 这 些 色彩 作为 修饰 色 。 

如 图 2-24 所 示 ， 这 是 一 个 主 色调 为 红色 (中 明度 、 中 纯度 )， 辅 助 色 为 灰色 ( 低 明度 、 低 纯 
度 )、 蓝 色 ( 中 明度 、 中 纯度 ) 和 白色 (高 明度 、 高 纯度 ) 的 网 络 购物 类 网 站 。 该 网 站 的 红色 给 人 以 
醒目 温暖 的 感觉 ， 白 色 则 给 人 以 干净 明亮 的 感觉 。 
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图 2-24 网 络 购物 类 网 站 示例 
2.3.2 ”案例 2 一 一 游戏 类 网 站 的 色彩 应 用 


随 着 互联 网 技术 的 不 断 进步 ， 各 种 类 型 的 游戏 类 网 站 如 雨后春笋 般 出 现 ， 并 逐渐 成 为 娱 
乐 类 网 站 中 不 可 缺少 的 类 型 。 这 类 网 站 的 风格 和 颜色 也 是 千变万化 ， 随 着 游戏 性 质 的 不 同 而 
呈现 出 不 同 的 样 貌 。 

如 图 2-25 所 示 ， 这 是 一 个 战斗 性 游戏 类 网 站 。 该 网 站 的 主 色调 为 灰色 (中 明度 、 中 纯 
度 )， 辅 助 色 为 黑色 ( 低 明 度 、 低 纯度 ) 和 黄色 (中 明度 、 中 纯度 )。 网 站 大 面积 使 用 灰色 修饰 网 
页 ， 给 人 一 种 深 幽 、 复 古 的 感觉 ， 仿 佛 回 到 了 那 修 远 的 远古 时 代 。 使 用 黑色 和 黄色 做 点 组 ， 
更 加 突出 了 远古 人 们 决斗 的 场景 ， 从 而 吸引 更 多 浏览 者 进入 虚幻 的 战斗 中 。 











2-25 ”游戏 类 网 站 示例 
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2.3.3 ”案例 3 一 一 企业 门户 网 站 的 色彩 应 用 

企业 门户 网 站 在 整个 网 站 界 占 据 着 重要 地 位 ， 其 网 站 配色 十 分 重要 ， 是 初学 者 必须 学 习 的 。 

1. 以 形象 为 主 的 企业 门户 网 站 

以 形象 为 主 的 企业 门户 网 站 就 是 以 企业 形象 为 主体 宣传 的 网 站 。 这 类 网 站 的 表现 形式 与 
众 不 同 ， 经 常 是 以 宽广 的 视野 、 雄 厚 的 实力 、 强 大 的 视觉 冲击 力 ， 并 配 以 震撼 的 音乐 及 气 字 
轩 晶 的 色彩 ， 将 企业 形象 不 折 不 扣 地 展现 在 世人 面前 ， 给 人 以 信任 和 安全 的 感觉 。 
图 2-26 所 示 是 一 个 标准 的 以 企业 形象 为 主 的 地 产 公 司 网 站 首页 。 该 网 站 的 主 色调 为 暗 红 
色 (中 明度 、 中 纯度 )， 辅 助 色 为 灰色 (中 明度 、 低 纯度 )。 页 面 采 用 暗 红色 来 勾勒 修饰 ， 运 用 战 
争 年 代 战 士 们 冲锋 陷 阵 的 图 片 作为 网 站 的 主 背景 ， 意 在 向 人 们 展现 此 企业 犹如 抗战 时 期 的 中 
国 一 样 ， 有 毅力 ， 有 动力 ， 有 活力 ， 并 且 有 足够 的 信心 将 自己 的 企业 做 大 做 强 。 另 外 ， 用 灰 
色 作为 修饰 色 ， 更 突出 表现 出 坚定 的 决心 和 充足 的 信心 。 

2. 以 产品 为 主 的 企业 门户 网 站 


以 产品 为 主 的 企业 门户 网 站 大 都 以 推销 其 产品 为 主 ， 整 个 网 页 贯穿 产品 的 各 种 介绍 ， 并 
从 整体 和 局 部 准确 地 展示 产品 的 性 能 和 质量 ， 从 而 突出 产品 的 特点 和 优越 性 。 此 类 网 站 的 表 
现 手法 也 比较 新 颖 ， 总 是 在 网 站 首页 或 欢迎 页 面 以 产品 形象 作为 展示 的 核心 ， 同 时 配 以 动画 
或 音效 等 ， 吸 引 浏览 者 的 注意 ， 从 而 达到 宣传 产品 的 目的 。 

如 图 2-27 所 示 的 某 品牌 汽车 厂商 网 站 就 是 一 个 很 好 的 例子 。 该 网 站 是 以 汽车 销售 为 主 的 
企业 门户 网 站 ， 用 黑色 ( 低 明度 、 低 纯度 ) 作 为 主 色 调 ， 用 以 展现 其 汽车 产品 的 强悍 与 优雅 ， 用 
灰色 (中 明度 、 低 纯度 ) 作 为 辅助 色 ， 使 页 面 在 稳重 中 增添 了 明亮 的 色彩 ， 增 加 了 汽车 的 力量 
感 ， 从 而 将 企业 产品 醒目 地 展现 给 浏览 者 。 
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图 2-26 ”以 形象 为 主 的 企业 门户 网 站 示例 图 2-27 ”以 产品 为 主 的 企业 门户 网 站 示例 


2.3.4 ”案例 4 一 一 时 政 新 闻 类 网 站 的 色彩 应 用 


时 政 新 闻 类 网 站 是 指 那些 以 提供 专业 动态 信息 为 主 ， 面 向 获取 信息 的 专业 用 户 的 网 站 ， 
此 类 网 站 比 门户 类 网 站 更 具 特 色 。 
如 图 2-28 所 示 ， 这 是 一 个 标准 的 时 政 新 闻 类 网 站 。 该 网 站 的 主 色调 为 蓝 色 ( 高 明度 、 高 纯 














度 )， 辅 助 色 为 白色 (高 明度 、 高 纯度 )。 该 网 站 结构 清晰 明了 ， 各 个 板块 分 配 明朗 ， 色 彩 调 
和 也 非常 到 位 ， 用 白色 作为 背景 色 ， 更 显示 出 蓝 色 的 纯净 与 舒适 ， 使 整个 页 面 显得 简单 而 
又 整齐 ， 从 而 给 人 一 种 赏心悦目 的 感觉 。 
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图 2-28 ”时政 新 闻 类 网 站 示例 


2.3.5 ”案例 5 一 一 影音 类 网 站 的 色彩 应 用 


在 众多 网 站 中 ， 影 音 类 网 站 是 受 欢迎 程度 相当 高 的 网 站 类 型 之 一 ， 特 别 是 青少年 群体 无 
疑 是 影音 类 网 站 浏览 者 的 主力 。 由 于 影音 类 网 站 以 突出 影像 和 声音 为 其 特点 ， 所 以 此 类 网 站 
在 影像 和 声音 方面 的 表现 尤为 突出 。 

如 图 2-29 所 示 的 影音 类 网 站 运用 具有 空旷 气息 的 蓝 色 作为 整个 网 页 的 修饰 色 ， 意 在 突出 
此 网 站 的 自然 气息 。 该 网 站 的 主 色 调 为 蓝 色 (中 明度 、 中 纯度 )， 辅 助 色 为 橘 黄色 (中 明度 、 中 
纯度 ) 和 白色 (高 明度 、 高 纯度 )， 使 用 自然 的 白色 更 加 衬托 出 蓝 色 的 洁净 和 优雅 ， 又 运用 桶 黄 
色 作 为 整个 网 站 的 点 绥 色 彩 ， 起 到 烘托 修饰 的 作用 ， 从 而 更 加 鲜明 地 突出 了 网 站 的 主题 。 


电 扎 口 影视 #8 图 ”ee Ounce | 


| 相国 是 全 的 影视 网 站 








网 2E。 电视剧。 电 曙 ， 预告 综艺。 局 胆 。 衣 








图 2-29 影音 类 网 站 示例 
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2.3.6 ”案例 6 一 一 娱乐 类 网 站 的 色彩 应 用 


在 众多 类 别 的 网 站 中 ， 思 想 最 活跃 、 格 调 最 休闲 、 色 彩 最 缤纷 的 网 站 非 娱乐 类 网 站 英 
属 。 格 式 多 样 化 的 娱乐 类 网 站 ， 总 是 通过 独特 的 设计 思路 来 吸引 浏览 者 的 注意 ， 表 现 其 个 性 
的 网 站 空间 。 

图 2-30 所 示 为 一 个 音乐 类 网 站 。 该 网 站 的 主 色调 为 蓝 色 ( 高 明度 、 高 纯度 )， 使 用 具有 神 
秘 色彩 的 黑色 作为 点 级 ， 从 而 给 人 一 种 新 鲜 感 。 











图 2-30 音乐 类 网 站 示例 


2.4 综合 案例 一 一 定位 网 站 页 面 的 框架 





在 网 站 布局 中 采用 “综合 框架 型 ”结构 对 网 站 进行 布局 ， 即 网 站 的 头 部 主要 用 于 放置 网 
站 Logo 和 网 站 导航 ; 网 站 的 左 框架 主要 用 于 放置 商品 分 类 、 销 售 排行 榜 等 ， 网 站 的 主体 部 分 
则 用 于 显示 网 站 的 商品 和 对 商品 的 购买 交易 ; 网 站 的 底部 主要 放置 版 权 信息 等 。 
在 设计 网 页 之 前 ， 设 计 者 可 以 先 在 Photoshop 中 勾画 出 框架 ， 然 后 在 该 框架 的 基础 上 进行 
布局 。 具 体操 作 步 又 如 下 。 
ED 打开 Photoshop CC， 如 图 2-31 所 示 。 
EC) 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建 】 对 话 框 ， 在 其 中 设置 文档 的 宽度 
为 1024 像素 、 高 度 为 768 像素 ， 如 图 2-32 所 示 。 
EEJ9) 单 击 【确定 】 按 钮 ， 即 可 创建 一 个 1024x768 像素 的 文档 ， 如 图 2-33 所 示 。 
EC 选择 左 侧 工 具 框 中 的 矩形 工具 ， 并 调整 路 径 状态 ， 画 一 个 矩形 框 ， 如 图 2-34 
所 示 。 
EED) 使 用 文字 工具 ， 创 建 一 个 文本 图 层 ， 输 入 “网 站 页 面 的 头 部 ”， 如 图 2-35 所 示 。 
TBY 依次 绘 出 网 站 的 中 左 、 中 右 和 底部 ， 网 站 的 结构 布局 最 终 如 图 2-36 所 示 。 
确定 好 网 站 框架 后 ， 就 可 以 结合 相关 知识 进行 网 站 不 同 区 域 的 布局 设计 了 。 
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图 2-31 Photoshop CC 的 操作 界面 图 2-32 【新 建 】 对 话 框 布 
局 
图 2-33 创建 空白 文档 图 2-34 ”绘制 矩形 框 
网 站 页 面 的 基部 | 网 站 页 面 的 头 部 
网 站 页 面 的 中 左 网 站 页 面 的 中 有 
网 站 页 面 的 赚 部 
图 2-35 输入 文字 图 2-36 ”网 站 页 面 结构 的 最 终 布局 


2.5 疑难 解 惑 


疑问 1: 如 何 使 自己 的 网 站 的 配色 更 具有 亲和力 ? 


答 : 在 对 网 页 进行 配色 时 ， 必 须 考虑 网 站 本 身 的 性 质 。 如 果 网 站 的 产品 以 化 妆 品 为 主 ， 
那么 这 样 的 网 站 的 配色 多 采用 柔和 、 和 柔美 、 明 亮 的 色彩 。 这 样 就 可 以 给 人 一 种 温柔 的 感觉 ， 
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具有 很 强 的 亲和力 。 
疑问 2: 如 何在 自己 的 网 页 中 营造 出 地 中 海风 情 的 配色 ? 


答 : 使 用 “和 白 + 蓝 ”的 配色 ， 可 营造 出 地 中 海风 情 的 配色 。 白 色 很 容易 令 人 感到 十 分 自 
由 ， 好 像 是 属于 大 自然 的 一 部 分 ， 令 人 心胸 开阔 ， 像 海天 一 色 的 大 自然 一 样 开阔 自在 。 要 想 
营造 出 这 样 的 地 中 海 式 风情 ， 必 须 把 室内 的 物品 ， 如 家 具 、 饰 品 、 窗 帘 等 都 限制 在 一 个 色 


系 中 ， 这 样 就 会 产生 统一 感 。 对 于 向 往 丰 海蓝 天 的 人 士 ， 白 色 与 蓝 色 是 居家 生活 最 佳 的 搭配 
选择 。 





在 入 = 
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GE 


读 懂 网 页 密码 一 一 
HTML 语言 速成 


HTML 即 超 文本 标记 语言 ， 是 一 种 用 来 制作 超 文 本 文档 的 简单 标记 语言 ， 是 一 
种 应 用 非常 广泛 的 网 页 格式 ， 也 是 被 用 来 显示 Web 页 面 的 语言 之 一 。 可 以 说 ,一 
个 网 页 对 应 于 一 个 HTML 文件 。HTML 文件 以 .htm 或 .html 为 扩展 名 ， 可 以 使 用 任 
何 能 够 生成 TXT 类 型 源 文件 的 文本 编辑 器 来 编辑 HTML 文件 。 
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3.1 网 页 的 HTML 构成 


在 一 个 HTML 文档 中 ， 必 须 包 含 <HTML></HTML> 标 记 ( 也 称 标 签 )， 并 且 该 标记 需要 放 
在 一 个 HTML 文档 的 开始 和 结束 位 置 。 即 每 个 文档 以 <HTML> 开 始 ， 以 </HTML> 结 束 。 
<HTIML> 与 <HTML> 之 间 通 常 包 含 两 个 部 分 ， 分 别 是 <HEAD></HEAD> 标记 和 
<BODY></BODY> 标 记 。HEAD 标记 包含 HIML 头 部 信息 ， 如 文档 标题 、 样 式 定 义 等 。 
BODY 标记 包含 文档 主体 部 分 ， 即 网 页 内 容 。 需 要 注意 的 是 ，HTML 标记 不 区 分 大 小 写 。 

为 了 便于 读者 从 整体 上 把 握 HTML 文档 结构 ， 下 面 通过 一 个 HTML 页 面 来 介绍 HTML 
页 面 的 整体 结构 。 示 例 代码 如 下 : 


<!DOCTYPE HTML> 

<HTML> 

<HEAD> 
<TITLE> 网 页 标题 </TITLE> 

</HEAD> 

<BODY> 


网 页 内 容 

</BODY> 

</HTML> 

从 上 述 代 码 可 以 看 出 ， 一 个 基本 的 HTML 页 面 由 以 下 几 个 部 分 构成 。 

(1) <!DOCTYPE> 声 明 必须 位 于 HTML 5 文档 中 的 第 一 行 ， 也 就 是 位 于 <HTML> 标 记 之 
前 。 该 标记 用 于 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!DOCTYPE> 声 明 不 属于 HTML 标 
记 ， 它 是 一 条 指令 ， 告 诉 浏览 器 编写 页 面 所 用 的 标记 的 版 本 。 由 于 HTML 5 版 本 还 没有 得 到 
浏览 器 的 完全 认可 ， 后 面 介 绍 时 还 采用 以 前 通用 的 标准 。 

(2) <HTML> 和 </HTML> 说 明 本 页 面 是 使 用 HTML 语言 编写 的 ， 使 浏览 器 软件 能 够 准确 
无 误 地 解释 、 显 示 。 

(3) <HEAD> 和 </HEAD> 是 HTML 的 头 部 标记 ， 头 部 信息 不 显示 在 网 页 中 。 在 该 标记 内 
可 以 嵌 套 其 他 标记 ， 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公用 属性 ， 如 通过 <style> 标 记 定 义 
CSS 样式 表 ， 通 过 <Scrip 伺 标记 定义 JavaScript 脚本 文件 。 

(4) <TITLE> 和 </TITLE> 标 记 是 HEAD( 头 部 ) 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显示 在 
浏览 器 的 窗口 标题 栏 中 。 如 果 没有 TITLE( 标 题 )， 浏 览 器 标题 栏 就 只 显示 本 页 的 文件 名 。 

(5) <BODY> 和 </BODY> 标 记 用 来 包含 HTML 页 面 显示 在 浏览 器 窗口 的 客户 区 中 的 实际 
内 容 。 例 如 ， 页 面 中 的 文字 、 图 像 、 动 画 、 超 链接 及 其 他 HIML 相关 的 内 容 都 是 在 该 标记 中 
定义 的 。 


3.1.1 文档 标记 
一 般 HTML 的 页 面 以 <ZHTML> 标 记 开 始 ， 以 </HTML> 标 记 结 束 。HTML 文档 中 的 所 有 内 


容 都 应 位 于 这 两 个 标记 之 间 。 如 果 这 两 个 标记 之 间 没 有 内 容 ， 则 该 HTML 文档 在 下 浏览 器 
中 的 显示 将 是 空白 页 面 。 





<HTML> 标 记 的 语法 格式 如 下 : 
<HTML> 
</HTML> 

3.1.2 ” 头 部 标记 


头 部 标记 (<HEAD>...</HEAD>) 包 含 的 是 文档 的 标题 信息 ， 如 标题 、 关 键 字 、 说 明 、 样 式 
等 。 除 了 <TITLE> 标 题 外 ， 一 般 位 于 头 部 标记 中 的 内 容 不 会 直接 显示 在 浏览 器 中 ， 而 是 通过 
其 他 的 方式 显示 。 

1. 内 容 

头 部 标记 中 可 以 嵌 套 多 个 标记 ， 如 <TITLE>、<BASE>、<ISINDEX> 和 <SCRIPT> 等 标 
记 ， 也 可 以 添加 任意 数量 的 属性 ， 如 <SCRIPT>、<STYLE>、<META> 或 <OBJECT> 等 。 除 了 
<TITLE> 标 记 外 ， 嵌 入 的 其 他 标记 可 以 使 用 多 个 。 

2. 位 置 

在 所 有 的 HTML 文档 中 ， 头 部 标记 不 可 或 缺 ， 但 是 其 起 始 和 结尾 标记 可 以 省 去 。 在 各 个 


HTML 的 版 本 文档 中 ， 头 部 标记 一 直 紧 跟 <BODY> 标 记 ， 但 在 框架 设置 文档 中 ， 其 后 跟 的 是 
<FRAMESET> 标 记 。 


3. 属性 


<HEAD> 标 记 的 属性 PROFILE 给 出 了 元 数据 描写 的 位 置 ， 从 中 可 以 看 到 其 中 的 <META> 
和 <LINK> 元 素 的 特性 。 该 属性 的 形式 没有 严格 的 格式 规定 。 


3.1.3 主体 标记 


主体 标记 (<BODY>...</BODY>) 包 含 了 文档 的 内 容 ， 用 若干 个 属性 来 规定 文档 中 显示 的 
背景 和 颜色 。 

主体 标记 可 能 用 到 的 属性 如 下 。 

(1) BACKGROUND=URI( 文 档 的 背景 图 像 ，URI 指 图 像 文 件 的 路 径 )。 

(2) BGCOLOR=Color( 文 档 的 背景 色 )。 

(3) TEXT=Color( 文 本 颜色 )。 

(4) LINK=Color( 链 接 颜色 )。 

(5) VLINK=Color( 已 访问 的 链接 颜色 )。 

(6) ALINK=Color( 被 选中 的 链接 颜色 )。 

(7) ONLOAD=Script( 文 档 已 被 加 载 )。 

(8) ONUNLOAD=Script( 文 档 已 退出 )。 

为 该 标签 添加 属性 的 代码 格式 如 下 : 


<BODY BRCKGROUND="URI"BGCOLOR="Color"> 


</BODY> 


当 蘑 中 消 TANLH 一 一 塞 盐 凡 习 厂 竺 性 人 小 鲁 
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3.2 HTML 的 常用 标记 


HTML 文档 是 由 标记 组 成 的 文档 。 要 熟练 掌握 HTML 文档 的 编写 ， 就 要 先 了 解 HTML 的 
常用 标记 。 


3.2.1 标题 标记 <h1> 到 <h6> 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 的 形式 出 现 之 外 ， 还 能 够 以 标题 的 形式 存 
在 。 通 常 一 篇 文档 最 基本 的 结构 ， 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 

HTML 文档 中 包含 各 种 级 别 的 标题 。 各 种 级 别 的 标题 由 元 素 <h1> 到 <h6> 来 定义 ， 其 中 
<hl> 代 表 1 级 标题 ， 级 别 最 高 ， 字 号 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 

下 面具 体 介 绍 标题 的 使 用 方法 。 

【 例 3.1】 标题 标记 的 使 用 (实例 文件 为 ch03\3.1.htmD。 有 具体 代码 如 下 : 

<html> 

<head> 

<title> 文 本 段 换行 </title> 

</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 

<h2> 这 里 是 2 级 标题 </h2> 

<h3> 这 里 是 3 级 标题 </h3> 

<h4> 这 里 是 4 级 标题 </h4> 

<h5> 这 里 是 5 级 标题 </h5> 

<h6> 这 里 是 6 级 标题 </h6> 

</body> 

</html> 


将 上 述 代码 输入 到 记事 本 文件 中 ， 并 以 后 缀 名 
为 .html 的 格式 保存 后 ， 可 在 正 浏览 器 中 预览 效果 ， EEC 
如 图 3-1 所 示 。 这 里 是 1 级 标题 
这 里 是 2 级 标题 


3 和 2 段落 标记 <p> 这 里 是 3 级 标题 


这 里 是 4 绒 标 题 

段落 标记 <p> 用 来 定义 网 页 中 的 一 段 文本 ， 文 本 在 | sawaes 
一 个 段落 中 会 自动 换行 。 段 落 标记 是 双 标记 ， 即 <p> 和 | 

</p>， 在 开始 标记 <p> 和 结束 标记 </p> 之 间 的 内 容 形成 





- oO x 








一 个 段落 。 如 果 省 略 掉 结 束 标 记 ， 从 <p> 标 记 开始 ， 那 图 3-1 标题 标记 的 使 用 效果 
么 直到 在 下 一 个 段落 标记 出 现 之 前 的 文本 ， 都 将 被 默 
认为 同一 段 段落 内 。 段 落 标记 中 的 p 是 指 英文 单词 paragraph( 即 “段落 ”) 的 首 字母 。 

下 面具 体 介绍 段落 标记 的 使 用 方法 。 

【 例 3.2】 段落 标记 的 使 用 (实例 文件 为 ch03\3.2.html)。 具 体 代码 如 下 : 


<html> 

<head> 

<title> 段 落 标 记 的 使 用 </title> 

</head> 

<body> 

<p> 白 雪 公 主 与 七 个 小 矮人 !</p> 

<p> 很 久 以 前 ， 白 雪 公 主 的 后 母 一 王后 美貌 盖世 ， 但 魔 镜 却 告诉 她 世上 唯 有 白雪 公主 最 漂亮 。 王 后 怒 
火 中 烧 ， 派 武士 把 她 押送 到 森林 准备 谋害 ， 武 士 很 同情 白雪 公主 ， 让 她 逃 往 森林 深 处 。 

</p> 

<p> 

小 动物 们 用 善良 的 心 抚慰 她 ， 鸟 曾 们 还 把 她 领 到 一 间 小 屋 中 ， 收 拾 完 房间 后 ， 她 进入 了 梦乡 。 房 子 的 主 
人 是 在 外 边 开矿 的 七 个 小 矮人 ， 他 们 听 了 白雪 公主 的 诉说 后 把 她 留 在 家 中 。 

</p> 

<p> 

王后 得 知 白雪 公主 未 死 ， 便 用 魔 镜 把 自己 变 成 一 个 老太婆 ， 来 到 密林 深 处 ， 哄 骗 白 雪 公 主 吃 下 一 只 有 毒 
的 苹果 ， 使 白雪 公主 昏 死 过 去 。 鸟 儿 识破 了 王后 的 伪装 ， 飞 到 矿山 向 小 矮人 报告 了 白雪 公主 的 不 幸 。 七 
个 小 矮人 火速 赶 回 ， 王 后 仓皇 逃跑 ， 在 狂风 暴雨 中 跌 下 山崖 摔 死 。 

</p> 

<p> 

七 个 小 矮人 翡 痛 万 分 ， 把 白雪 公主 安放 在 一 只 水 晶 棺 里 日 日 夜 夜 守护 着 她 。 邻 国 的 王子 闻 讯 ， 骑 着 白马 
赶 来 ， 爱 情 之 吻 使 白雪 公主 死 而 复生 。 然 后 王子 带 着 白雪 公主 骑 上 白马 ， 告 别 了 七 个 小 矮人 和 森林 中 的 
动物 ， 到 王子 的 宫殿 中 开始 了 幸福 的 生活 。 

</p> 

</body> 

</html> 


将 上 述 代码 输入 到 记事 本 文件 中 ， 并 以 后 级 名 为 .html 的 格式 保存 ， 然 后 在 正 浏览 器 中 
预览 效果 ， 如 图 3-2 所 示 ， 可 以 看 出 <P> 标 记 将 文本 分 成 了 5 个 段落 。 


三 淹 流 | 


浔 脏 中 斑 TANLH 一 一 宇 遇 叶 习 隧 洗 性 小 鲁 











国 csersqiangwDocumer 月 - 上 | 司 RE 的 E 用 
白雪 公主 与 七 个 小 笑 人 ! 


很 久 以 前 ， 白 雪 公 主 的 后 母 一 王后 美貌 差 世 ， 但 麻 镜 却 告诉 她 世上 唯 有 白雪 公主 最 漂 
es 县 起 士 把 好 择 送 到 森林 准备 谋害 ， 武 士 同情 白雪 公主 ， 让 好 远 往 


少 动物 们 用 善良 的 心 抚慰 她 ， 鸟 兽 们 还 把 她 领 到 一 间 小 屋 中 ， 收 近 完 房间 后 ， 她 进入 
向 BE 他 们 听 了 白白 雪 公主 ( 他 加 全 


王后 得 知 白雪 公主 未 死 ， 便 用 魔 镜 把 自己 变 成 一 个 老 二 构 ， 来 到 宫 林 深 处 ， 哄 骗 白 轨 
公主 吃 下 一 只 有 毒 的 苹果 ， 全 生生 大 二 和 二 人 。 鸟 儿 识 破 了 王后 的 伪装 ， 飞 到 矿山 
其 8 轨 公 王 的 不 幸 。 七 个 小 千 人 人 火 过 赶 回 仓 怪 逻 跑 ， 在 狂风 暴 南 中 跌 下 山 凑 


七 个 小 敌人 悲痛 万 分 ， 把 自若 全 直 守 光大 水 虹 按 时 日 是 闪 认 守 关 产 邻 国 的 王 
子 闻 讯 ， 骑 着 白马 赶 来 ， 爱 情 之 哆 使 白雪 公主 然后 王子 带 着 白雪 公主 骑 上 
白马 ， 告 别 了 七 个 小 禾 人 和 奔 林 中 的 动物 ， 于 中 有 站 了 于 有 避 是 人 











3-2 ”段落 标记 的 使 用 效果 


3.2.3 ”换行 标记 <br> 


使 用 换行 标记 <br> 可 以 给 一 段 文 字 换 行 。 该 标记 是 一 个 单 标 记 ， 它 没有 结束 标记 ， -> 
文 单词 break 的 缩写 ， 作 用 是 将 文字 在 一 个 段 内 强制 换行 。 一 个 <br> 标 记 代表 一 次 换行 ， 连 续 
的 多 个 标记 可 以 实现 多 次 换行 。 使 用 换行 标记 时 ， 在 需要 换行 的 位 置 添加 <br> 标 记 即 可 。 

下 面具 体 介 绍 换行 标记 的 使 用 方法 。 
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【 例 3.3】 换行 标记 的 使 用 (实例 文件 : ch03\3.3.htmD。 具 体 代 码 如 下 : 


<html> 

<head> 
<title> 文 本 段 换 行 </title> 
</head> 

<body> 

清明 <br/> 

清明 时 节 雨 纷纷 <br/> 
路 上 行人 和 欲 断 魂 <br/> 
借 问 酒家 何 处 有 <br/> 
牧童 遥 指 桂花 村 
</body> 

</html> 


将 上 述 代码 输入 到 记事 本 文件 中 ， 并 以 后 级 名 为 .html 的 
格式 保存 ， 然 后 在 正 浏览 器 中 预览 效果 ， 如 图 3-3 所 示 。 (Dwr Do | Bre 
Rg 


3.2.4 ”链接 标记 <a> A 


牧 重 记 指 可 花村 





链接 标记 <a> 是 网 页 中 最 为 常用 的 标记 ， 主 要 用 于 把 页 
面 中 的 文本 或 图 片 链接 到 其 他 的 页 面 、 文 本 或 图 片 。 建 立 链 
接 的 要 素 有 两 个 ， 即 可 被 设置 为 链接 的 网 页 元 素 和 链接 指向 图 3-3 换行 标记 的 使 用 效果 
的 目标 地 址 。 链 接 的 基本 语法 格式 如 下 : 


<a href=URL> 网 页 元 素 </a> 
下 面具 体 介绍 链接 标记 的 使 用 方法 。 
1. 设置 文本 和 图 片 的 链接 


可 被 设置 为 链接 的 网 页 元 素 是 指 网 页 中 通常 使 用 的 文本 和 图 片 。 文 本 链接 和 图 片 链接 通 
过 <a> 和 </a> 标 记 来 实现 ， 即 将 文本 或 图 片 放 在 <a> 开 始 标 记 和 </a> 结 束 标记 之 间 即 可 建立 文 
本 和 图 片 链接 。 

【 例 3.4】 设置 文本 和 图 片 的 链接 (实例 文件 为 ch03\3.4.html)。 打 开 记 事 本 文件 ， 在 其 中 
输入 以 下 HTML 代码 : 

<html> 


<head> 

<title> 文 本 和 图 片 链接 </title> 

</head> 

<body> 

<a href="a.html"><img src="images/Logo.gif"></a> 
<a href="b.html"> 公 司 简介 </a> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “链接 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏览 器 
中 查看 到 使 用 链接 标记 设置 文本 和 图 片 的 效果 了 ， 如 图 3-4 所 示 。 





2. 设置 电子 邮件 路 径 

电子 邮件 路 径 ， 即 用 来 链接 一 个 电子 邮件 的 地 址 。 其 语法 格式 如 下 : 

mailto: 邮 件 地 址 

【 例 3.5】 设置 电子 邮件 路 径 ( 实 例文 件 为 ch03\3.5.html)。 打 开 记 事 本 文件 ， 在 其 中 输入 
以 下 HTML 代码 : 


<html> 
<head> 

<title> 电 子 邮件 路 径 </title> 

</head> 

<body> 

使 用 电子 邮件 路 径 ，<a href="mailto:1iule20128163.com"> 链 接 </a> 
</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “电子 邮件 链接 .html” 文 件 ， 然 后 双击 该 文件 ， 即 可 在 更 
浏览 器 中 查看 到 使 用 链接 标记 设置 电子 邮件 路 径 的 效果 了 。 当 单 击 含有 链接 的 文本 时 ， 会 弹 
出 一 个 发 送 邮件 的 窗口 ， 显 示 效 果 如 图 3-5 所 示 。 


如 订 串 消 TANLH 一 一 塞 盐 凡 习 厂 竺 _ 才 人 小 全 
































画 cWeesqwwWDoamensD -| 局 思拓 
本 使 用 志 子 邹 件 路 径 ， 吝 接 
弛 ChUsers\qiangu\Doc 巍 ”上 万 文本 和 图 片 榜 深 
于 me 
公司 简介 
图 3-4 文本 和 图 片 链 接 的 显示 效果 3-5 ”电子 邮件 链接 路 径 的 显示 效果 


3.2.5 ”列表 标记 <ul> 

文字 列表 可 以 有 序 地 编排 一 些 信 息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 
来 ， 以 便 浏览 者 能 更 加 快捷 地 获得 相应 的 信息 。HTML 中 的 文字 列表 如 同文 字 编辑 软件 Word 
中 的 项 目 符号 和 自动 编号 。 

1. 建立 无 序列 表 

无 序列 表 相当 于 Word 中 的 项 目 符号 。 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 
项 标识 。 无 序列 表 的 建立 使 用 的 是 一 对 标记 <ul> 和 </ml>， 其 中 每 一 个 列表 项 的 建立 还 要 使 用 
一 对 标记 <li>= 和 </li>。 其 语法 格式 如 下 : 
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<ul> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 


</ul> 


在 无 序列 表 结 构 中 ， 使 用 <ul> 和 </ul> 标 记 表 示 该 无 序列 表 的 开始 和 结束 ，<li> 则 表示 该 
列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 的 结束 标记 可 以 省 略 。 

下 面 通过 实例 介绍 使 用 无 序列 表 实 现 文本 的 排列 显示 。 

【 例 3.6】 建立 无 序列 表 ( 实 例文 件 为 ch03\3.6.htmD)。 打 开 记事 本 文件 ， 在 其 中 输入 以 下 
HTML 代码 : 


<html> 
<head> 
<title> 肉 套 无 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需 求 </1i> 
<1i> 系统 分 析 
<ul> 
<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 目录 结构 设计 </1i> 
<1i> 网 站 标志 设计 </1i> 
<1i> 网 站 风格 设计 </1i> 
<1i> 网 站 导航 系统 设计 </1i> 
</ul> 
过 /> 
<1i> 伪 网 页 草图 
<ul> 
<1i> 制 作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 
</ul> 
</1i> 
<1i> 站 点 建设 </1i> 
<1i> 网 页 布局 </1i> 
<1i> 网 站 测试 </1i> i 可 | 
<1i> 站 点 的 发 布 与 站 点 管理 </1i> | weno -0S wea | 
</ul> 人 网 站 建设 流程 
</body> 项目 委 林 
</html> 和 
* 内 容 相伴 
代码 输入 完成 后 ， 将 其 保存 为 “无 序列 er 
表 .html” 文 件 ， 然 后 双击 该 文件 ， 即 可 在 正 浏 二 
览 器 中 查看 到 使 用 列表 标记 建立 无 序列 表 的 效果 : 半 an 
加 a :请 
Ts mR: 和 
通过 观察 发 现 ， 在 无 序列 表 项 中 ， 可 以 嵌 套 一 
一 个 列表 。 例 如 ， 代 码 中 的 “系统 分 析 ” 列 表 项 图 3-6 建立 的 无 序列 表 











和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因 此 在 这 对 <li> 和 </i> 标 记 之 间 又 增加 了 一 对 <ul> 


和 </ul> 标 记 。 
2. 建立 有 序列 表 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 。 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 
基本 相同 。 它 使 用 的 标记 是 <ol> 和 </ol>， 每 个 列表 项 前 使 用 的 标记 是 <li> 和 </li>， 且 每 个 项 目 
都 有 前 后 顺序 之 分 ， 多 数 情况 下 该 顺序 使 用 数字 表示 。 其 语法 格式 如 下 : 


<ol> 
<1i> 第 1 项 </1i> 
<1i> 第 2 项 </1i> 
<1i> 第 3 项 </1i> 
</o1> 


下 面 通过 实例 介绍 使 用 有 序列 表 实现 文本 的 排列 显示 。 
【 例 3.7】 建立 有 序列 表 ( 实 例文 件 为 ch03\3.7.html)。 打 开 记 事 本 文件 ， 在 其 中 输入 以 下 


HTML 代码 : 


<html> 
<head> 
<title> 有 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1l> 本 讲 目标 </h1> 
<ol> 
<1i> 网 页 的 相关 概念 </1i> 
<1i> 网 页 与 HTML</1i> 
<1i>Web 标准 (结构 、 表 现 、 行 为 ) </1i> 
<1i> 网 页 设计 与 开发 的 过 程 </1i> 
<1i> 与 设计 相关 的 技术 因素 </1i> 
<1i>HTML 简介 </1i> 
</ol> 
</body> 
</html> 


代码 输入 完成 后 ， 将 其 保存 为 “有 序列 
表 .html” 文 件 ， 然 后 双击 该 文件 ， 即 可 在 正 浏 
览 器 中 查看 到 使 用 列表 标记 建立 有 序列 表 后 的 
效果 了 ， 如 图 3-7 所 示 。 


3.2.6 图 像 标 记 <img> 


录 碾 吊 育 TANLH 一 一 前 由 司 习 硬 闵 册 e 小 四 








本 讲 
网 页 的 相关 概念 
Web 标 准 (结构 、 表 现 、 行 为) 
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司 CUsers\qiangu\Doc  - C | 臣 有 序列 可 的 使 用 


- 0O x 


目标 








图 3-7 建立 的 有 序列 表 


图 像 可 以 美化 网 页 ， 插 入 图 像 时 可 以 使 用 图 像 标 记 <img>。<img> 标 记 的 属性 及 其 描述 如 


表 3-1 所 示 。 
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表 3-1 <img> 标 记 的 属性 










定义 有 关 图 形 的 相关 描述 
要 显示 的 图 像 的 URL 
定义 图 像 的 高 度 














ismap URL 把 图 像 定义 为 服务 器 端的 图 像 映射 
定义 作为 客户 端 图 像 映射 的 一 幅 图 像 。 请 参阅 <map> 和 <area> 标签 ， 了 
usemap URL 


解 其 工作 原理 
定义 图 像 项 部 和 底部 的 空白 。 不 支持 。 请 使 用 CSS 代替 
设置 图 像 的 宽度 










VSpace Pixels 
width 








pixels % 


1. 插入 图 片 

src 属性 用 于 指定 图 片 源 文件 的 路 径 ， 它 是 <img> 标 记 必 不 可 少 的 属性 。 其 语法 格式 如 下 : 

<img src=" 图 片 路 径 "> 

图 片 的 路 径 既 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 

【 例 3.8】 在 网 页 中 插入 图 片 (实例 文件 为 ch03\3.8.html)。 打 开 记 事 本 文件 ， 在 其 中 输入 
以 下 HTML 代码 : 


<html> -oO x 
<head> | 国 CVsers\iengu\Documents\ 果 | 户 - | 大 考 和 轩 上 x 也 
<title> 插 入 图 片 </title> 一 
</head> oe | 
<body> wy ? 
Es src="images/meishi.jpg"> pA 
</body> 
/Rs EA 
、 心 殴 、 玉 
代码 输入 完成 ， 将 其 保存 为 “插入 Ns 





图 片 .html” 文 件 ， 然 后 双击 该 文件 ， 即 
可 在 正 浏览 器 中 查看 到 使 用 <img> 标 记 
插入 图 片 后 的 效果 了 ， 如 图 3-8 所 示 。 3-8 插入 图 片 的 显示 效果 


2. 从 不 同位 置 插入 图 片 


在 插入 图 片 时 ， 用 户 可 以 将 其 他 文件 夹 或 服务 器 中 的 图 片 显 示 到 网 页 中 。 
【 例 3.9】 从 不 同位 置 插入 图 片 (实例 文件 为 ch03\3.9.html)。 打 开 记 事 本 文件 ， 在 其 中 输 
入 以 下 HTML 代码 : 


<html> 
<body> 





<p> 
来 自 一 个 文件 夹 的 图 像 : 

<img src="images/meishi.jpg" /> 
</p> 

<p> 


来 自 baidnu 的 图 像 : 


<img 


src="http://www.baidu.com/img/shouye b5486898c692066bd2cbaeda86d74448.gif" 


> 

</p> 

</body> 

</html> 

代码 输入 完成 后 ， 将 其 保存 为 “插入 
其 他 位 置 图 片 .html” 文 件 ， 然 后 双击 该 文 
件 ， 即 可 在 下 浏览 器 中 查看 到 使 用 <img> 
标签 插入 图 像 后 的 效果 了 ， 如 图 3-9 所 示 。 


3. 设置 图 片 的 宽度 和 高 度 


在 HTML 文档 中 ， 还 可 以 任意 设置 插 
入 图 片 的 显示 大 小 。 设 置 图 片 尺寸 可 以 通 
过 图 片 的 属性 width( 宽 度 ) 和 height( 高 度 ) 来 
实现 。 

【 例 3.10】 设置 图 片 在 网 页 中 的 宽度 
和 高 度 (实例 文件 为 ch03\3.10.html)。 打 开 
记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 : 


<html> 

<head> 
<title> 插 入 图 片 </title> 
</head> 

<body> 

<img src="images/01.jpg"> 








全 


当 蘑 中 泣 TANLH 一 一 家 眉 导 习 琴 半山 小 : 


Bai 轨 下 


来 自 baiar 的 图 像 ， 
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、 


<img src="images/01.jpg" width="200"> 
<img src="images/01.jpg" width="200" height="300"> 


</body> 

</html> 

代码 输入 完成 后 ， 将 其 保存 为 “ 设 
置 图 片 大 小 .html” 文 件 ， 然 后 双击 该 文 
件 ， 即 可 在 正 浏览 器 中 查看 到 使 用 
<img> 标 签 设置 的 图 片 的 宽度 和 高 度 效 
果 了 ， 如 图 3-10 所 示 。 

由 图 3-10 可 以 看 到 ， 图 片 的 显示 尺 
寸 是 由 width 和 height 控制 的 。 当 只 为 
图 片 设置 一 个 尺寸 属性 时 ， 另 外 一 个 尺 
寸 就 以 图 片 原始 的 长 宽 比 例 来 显示 。 图 
片 的 尺寸 单位 可 以 选择 百分比 或 数值 。 
百分比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 








A 入 


司 chusersqianguDocumertsi PD "0 |B 二 AS 











3-10 ”图 片 高 度 与 宽度 的 设置 效果 
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mi 


9 网 页 中 插入 的 图 片 都 是 位 图 ， 当 放大 图 片 的 尺寸 时 ， 图 片 就 会 出 现 马 赛 克 ， 变 得 
日 意 。 很 模 业 。 
em 在 Windows 中 查看 图 片 的 尺寸 ， 只 需要 找到 图 片 文件 ， 把 鼠标 指针 移动 到 图 上 


上 ， 停 留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 显 示 出 该 图 片 文件 的 尺寸 。 尺 寸 后 显示 的 数 
字 ， 代 表 的 是 图 片 的 宽度 和 高 度 ， 如 256 x 256。 


3.2.7 表格 标记 <table> 


HTML 中 的 表格 标记 包括 以 下 几 个 。 

(1) <table>...</table> 标 记 。<table> 标 记 用 于 标识 一 个 表格 对 象 的 开始 ;</table> 标记 标 
识 一 个 表格 对 象 的 结束 。 一 个 表格 中 ， 只 允许 出 现 一 对 <table> 和 </table> 标 记 。 

(2) <tr>...</tr> 标 记 。<tr> 用 于 标识 表格 一 行 的 开始 ;</tr> 标记 用 于 标识 表格 一 行 的 结 
束 。 表 格 内 有 多 少 对 <t> 和 </t> 标 记 ， 就 表示 表格 中 有 多 少 行 。 

(3) <td>...</td> 标 记 。<td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单元 格 开 始 ，</td> 标 记 用 于 
标识 表格 某 行 中 的 一 个 单元 格 结束 。<td> 和 </td> 标 记 书 写 在 <ut> 和 </t> 标 记 内 。 一 对 <t> 和 
</tt> 标 记 内 有 多 少 对 <td> 和 </td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。 

最 基本 的 表格 ， 必 须 包 含 一 对 <table> 和 </table> 标 记 、 一 对 或 几 对 <t> 和 </tr> 标 记 以 及 一 
对 或 几 对 <td> 和 </td> 标 记 。 一 对 <table> 和 </table> 标 记 定 义 一 个 表格 ， 一 对 <tt> 和 </tr> 标 记 定 
义 一 行 ， 一 对 <td> 和 </td> 标 记 定义 一 个 单元 格 。 

【 例 3.11】 定义 一 个 4 行 3 列 的 表格 (实例 文件 为 ch03\3.11.htmD。 打 开 记 事 本 文件 ， 在 
其 中 输入 以 下 HTML 代码 : 


<html> 
<head> 
<title> 表 格 基本 结构 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>Al</td> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 


所 


<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
/tr> 
</table> 
</body> 
</html> 


代码 输入 完成 后 ， 将 其 保存 为 “表格 .html” 一 
文件 ， 然 后 双击 该 文件 ， 即 可 在 正 浏览 器 中 查看 司 cAUsers\qiangu\Doc P - C | 大雪 想到 本 结构 
到 使 用 表格 标记 插入 表格 后 的 效果 了 ， 如 图 3-11 回国 加 
所 示 。 IA2||B2||C2| 


3.2.8 表单 标记 <form> 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 。 
其 标记 为 <form> 和 </form>。 表 单 的 基本 语法 格式 3-11 ”表格 标记 的 使 用 效果 
如 下 : 


<form action="url" method="get|post" enctype="mime"> 
</form > 


其 中 ，action=url 用 于 指定 处 理 提交 表单 的 格式 ， 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮 
件 地 址 。method=get 或 post 用 于 指明 提交 表单 的 HTTP 方法 。enctype=cdata 用 于 指明 把 表单 
提交 给 服务 器 时 的 互联 网 媒体 形式 。 表 单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 
表单 元 素 ， 将 显示 不 同 的 效果 。 

下 面 介绍 如 何 使 用 表单 标记 开发 一 个 简单 网 站 的 用 户 意见 反馈 页 面 。 

【 例 3.12】 开发 用 户 意见 反馈 页 面 (实例 文件 为 ch03\3.12.html)。 打 开 记 事 本 文件 ， 在 其 
中 输入 以 下 HTML 代码 : 


<html> 

<head> 

<title> 用 户 意见 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 意 见 页 面 </h1> 

<form method="post" > 

<p> 姓 gnbsp; sgnbsp; gnbsp; gnbsp; 名 : 

<input type="text" class=txt size="12"” maxlength="20" name="username" /> 
</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 : 

<input type="radio" value="male" /> 男 
<input type="radio" value=" female" /> 女 
</p><p> 年 gnbsp; gnbsp; gnbsp; gnbsp; 龄 : 

<input type="text" class=txt name="age" /> 
</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮件 : 


<input type="text" class=txt name="email™" /> 
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</p><p> 联 系 地 址 : 
<input type="text" class=txt name="address" /> 
</p> 


<p> 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit"” name="submit"” value=" 提 交 "/> 

<input type="reset" name="reset"” value=" 清 除 ” /> 





</p> 

</form> 

</body> er 
SE 用 户 意见 反馈 页 而 





代码 输入 完成 后 ， 将 其 保存 为 “表单 html” 文 ， 所 二 
件 ， 然 后 双击 该 文件 ， 即 可 在 下 浏览 器 中 查看 到 ”三 二 二 
使 用 表单 标记 插入 表单 后 的 效果 了 ， 如 图 3-12 所 > 二 
示 ， 可 以 看 到 创建 的 用 户 反 馈 表 单 ， 包 含 一 个 标题 。 aaseasm 
“用 户 意见 反馈 页 面 ”， 还 包括 “姓名 ”“ 性 别 ” 


“年 龄 ”“ 联 系 电话 ”“ 电 子 邮 件 ”“ 联 系 地 址 ” 
等 内 容 。 图 3-12 表单 标记 的 使 用 效果 


EE 








3.3 ”综合 案例 一 一 制作 日 程 表 


通过 在 记事 本 中 输入 HTML 语言 ， 可 以 制作 出 多 种 多 样 的 页 面 效 果 。 下 面 以 制作 日 程 表 
为 例 ， 介 绍 HTML 语言 的 综合 应 用 方法 。 具 体操 作 步 骤 如 下 。 
EEC 打开 记事 本 文件 ， 在 其 中 输入 以 下 代码 : 


<html> 
<head> 
<META http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 制 作 日 程 表 </title> 


</head> 


<body> 
</body> 
</html> 


输入 代码 后 的 【记事 本 】 窗 口 如 图 3-13 所 示 。 
EEC 在 <head> 标 记 之 前 输入 以 下 代码 : 


<style type="text/css"> 
body { 

background-color: #FFD9D9; 
text-align: center; 


</style> 


输入 代码 后 的 【记事 本 】 窗 口 如 图 3-14 所 示 。 





EF = 日 多 
广 尾 旧病 三 日 人 ERK(O) 到 (VV) 项 革 人 H) 
ED 
ad 
NETA bttp-ecaiv= Content-Type”content= text/html charset=gb2312” /》 
title? 制 作 日 各 表 wsitley 
sa 中 
body> 
/body> 
hnly 


ETA ht tp-eqs 
cste) 制 修 上 并 
el te 





Hortalign: center; 
[Wstyle> 
Chead> 


ody> 
Sbody> 


Chtm > v 





3-13 ”输入 代码 后 的 【记事 本 】 窗 口 
ET 在 </style> 标 记 之 前 输入 以 下 代码 : 


-Ziti { 


3-14 ”在 </head> 标 记 前 输入 代码 


font-family: "方正 粗 活 意 简 体 "，" 方 正大 黑 简 体 "; 


font-size: 36px; 


} 


输入 代码 后 的 【记事 本 】 窗 口 如 图 3-15 所 示 。 
EEC 在 <body> 和 </body> 标 记 之 间 输 入 以 下 代码 : 


<span class="ziti"> 一 周 日 程 表 </span> 


输入 代码 后 的 【记事 本 】 窗 口 如 图 3-16 所 示 。 








| 司 天 5 BF 二 

文件 (F)_ 蝙 刀 | 候 式 (DO) 查理 KW。 芝 肥 (H) 

html> 

ei ui Type” /mal 2312” / 
Http y=“Content-Type” content="tert/htinl; charset=gh: td 

nite 让 放下 实时 





Cstyle typo= toxt/css"» 
ltoay 【 

backer ound-color: #mFDAD9, 
textratign: center 


iti 
font -fanily, 
font-size; 





“方正 粗 疾 意 简体 “，“ 方 正大 黑 简 钵 “ 
l 要 

/style) 
head> 
chody> 


/bocy> 
whtal> 





上 FF -is - oO x 

ZH WD) FEO) EBV) WOO 

amy 

choad 
GTA ht th-eqsr="Contone-Type” contont="tort/htrl; charcot=sb2312" /> 

ditle 洛 | 作 日 各 志 title> 


style type™ text/css"> 

lbody { 

lbackgr ound- colar: #7F0%S. 

toxt-align: conter; 

Liu { 
fmt-fqnily; “方正 相 活 意 简 休 ”， “方正 大 生 简 休 ; 
ont -size: 36pr 

} 


/etylo> 


/heady 














图 3-15 在 </style> 标 记 之 前 输入 代码 


本 BY 在 <body> 标 记 之 前 输入 以 下 代码 : 


图 3-16 在 <body> 和 </body> 标 记 之 间 输 入 代码 


<table width="470" border="1"” align="center" cellpadding="2" 


cellspacing="3"> 
<tr> 


<td width="84" 
<td width="84" 
<td width="86" 
<td width="83"™ 
<td width="83" 
</tr> 
和 立 


style="text-align 
style="text-align 
style="text-align 
style="text-align 
style="text-align 


center">gnbsp;</td> 
center"> 工 作 一 </td> 
center"> 工 作 二 </td> 
center"> 工 作 三 </td> 
center"> 工 作 四 </td> 


<tqd style="text-align: center; font-family: ' 宋 体 !;"> 星 期 一 </td> 
<td style="text-align: center">gnbsp;</td> 
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<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
之 疙 于 袜 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
= 
</table> 


style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 





style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp; </td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


输入 代码 后 的 【记事 本 】 窗 口 如 图 3-17 所 示 。 


国 天 人 t 量 -记事 本 
文件 日 ” 病 县 E) 相 式 (O) 


EL 


"宋体 ' "> 星期 二 </td> 


"宋体 ' "> 星期 三 </td> 


5 宋体 ' 7 "> 星期 四 </td> 


"宋体 ' "> 星期 五 </td> 












style- “text-align: 


oxt-align: 


i”) 一 周 日 程 表 </span>， 和 性 
0” border="1" align="center” cellpadding="2” cellspacing="3"> 


: center’ Ynbep; /td> 
"pL 








: center Ynbsp; /td> 





rbsp; 《Atd> 


centi 
: center' >anbspi (/td> 
: center Yrbsp; /td> 


canter; fent-family:“ 宇 体 ' ;> 星期 一 人 /ta> 


center; font-fanily:， 朱 件 ; “星期 二 </td> 








3-17 ”在 </body> 标 记 之 前 输入 代码 


EECSRD 在 【记事 本】 窗口 中 选择 【文件 】 一 【保存 】 命 令 ， 弹 出 【另存 为 】 对 话 框 ， 



































































































































设置 保存 文件 的 位 置 ， 在 【文件 名 】 下 拉 列 表 框 中 输入 “制作 日 程 表 .html”， 然 后 
单 击 【保存 】 按 钮 ， 如 图 3-18 所 示 。 
双击 打开 保存 的 index.html 文件 ， 即 可 看 到 制作 的 日 程 表 ， 如 图 3-19 所 示 。 
国光 个 辐 ， HR 车 ， 文 丰 ~ 可 要 要 文 全 a 
Ee ~ 一 周 日 程 表 
日 和 一 BE 工作 二 工作 三 | 工作 四 
ed 月 月 , 避 昧 对 三 
3 星期三 
tN TEE er ~ EE 而 
全 类 型 文员 文 IC 星期 五 
~、 网 六 从 3/ ANSY "Ce [站 现 

















3-18 【另存 为 】 对 话 框 


图 3-19 查看 制作 的 日 程 表 


如 果 需 要 在 日 程 表 中 添加 工作 内 容 ， 可 以 用 【记事 本 】 程 序 打 开 index.html 文 
件 ， 在 代码 段 <td style="text-align: center">&nbsp;</td> 的 &nbsp 之 前 输入 内 容 即 可 。 


比如 ， 要 输入 星期 一 完成 的 第 1 件 工作 内 容 “ 完 成 校对 ”， 


置 输入 。 


可 在 如 图 3-20 所 示 的 位 


国耻 保存 后 打开 文档 ， 即 可 在 浏览 器 中 看 到 添加 的 工作 内 容 ， 如 图 3-21 所 示 。 
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td style=’text-align: center; font-， tly "宋体 " ;> 星期 二 cj/rc 


Ktd styler text-elien: conter, nbsp; Ct 
sd style="text-alien: conter’>Enbep; /TD 





WE em -1 二 <” 和 


司 chusersqiangwpoc 忆 -| 古 制 /FE 得 表 
文件 站 ”六 各 日 ”下 看 M) 术 王 夫 (A) 工具 (邦人 Hi) 


一 周 日 程 表 
= 下 作 二 正 作 三 
完成 校对 























工作 四 


































































































图 3-20 输入 工作 内 容 后 的 记事 本 窗口 


3-21 ”查看 添加 的 工作 内 容 


3.4 疑难 解 惑 


疑问 1: 
答 
双 标 记 是 指 既 有 开始 标记 又 有 结束 标记 。 


HTML 5 中 的 单 标记 和 双 标 记 的 书写 方法 是 什么 ? 
答 : HTML 5 中 的 标记 分 为 单 标 记 和 双 标 记 。 所 谓 单 标记 ， 是 指 没 有 结束 标记 的 标记 ， 
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对 于 单 标记 是 不 允许 写 结束 标记 的 元 素 ， 只 人 允许 以 < 元 素 /> 的 形式 进行 书写 和 使 用 。 例 
如 ，<br> 和 </br> 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br >。 当然 ， 在 HTML 5 之 前 的 版 
本 中 ，<br> 这 种 书写 方法 可 以 被 沿用 。HTML 5 中 不 允许 写 结束 标记 的 元 素 有 area、base、 
br、 col、 command、embed、hr、img、input、keygen、link、meta、param、source、track、 
wbr。 

对 于 部 分 双 标记 可 以 省 略 结束 标记 。HTML 5 中 允许 省 略 结束 标记 的 元 素 有 li、dt、dd、 
p、 rt、 rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。 

HTML 5 中 有 些 元 素 还 可 以 完全 被 省 略 。 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 
方式 存在 的 。HTML 5 中 允许 省 略 全 部 标记 的 元 素 有 html、head、body、colgroup、tbody。 


疑问 2: 使 用 【记事 本 】 程 序 编辑 HTML 文件 时 应 注意 哪些 事项 ? 


答 : 很 多 初学 者 在 保存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 
级 ， 导 致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 ， 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 单 击 右键 创 
建 的 记事 本 文件 ， 那 么 在 给 文件 重 命名 时 ， 一 定 要 以 .html 或 .htm 作为 文件 的 后 级 。 特 别 要 注 
意 的 是 ， 当 Windows 系统 的 扩展 名 是 隐 式 的 时 候 ， 更 容易 出 现 这 样 的 错误 。 为 避免 这 种 情况 
的 发 生 ， 读 者 可 以 在 【文件 夹 选项 】 对 话 框 中 查看 扩展 名 是 否 是 显 式 的 。 


第 4 章 
开启 网 页 制作 之 路 
一 网 站 建设 基本 

流程 与 制作 

开县 


建立 网 站 之 前 ， 用 户 首先 需要 了 解 网 站 建设 流程 ， 然 后 在 网 上 注册 一 个 域名 ， 
申请 一 个 网 站 空间 ， 以 便 存 放 网 站 。 在 网 站 建设 过 程 中 ， 需 要 搭配 使 用 多 种 制作 工 
具 ， 主 要 包括 用 于 制作 网 页 文字 与 图 像 特 效 的 Photoshop、 用 于 制作 网 页 动画 效果 
的 Flash 和 用 于 制作 网 页 布局 的 Dreamweaver。 
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4.1 建站 方式 


目前 ， 建 设 一 个 网 站 已 经 不 是 什么 神秘 的 事情 了 。 用 户 可 以 选择 多 种 建站 方式 。 比 较 常 
见 的 建站 方式 主要 有 3 种 ， 即 自助 建站 、 智 能 建站 和 专业 设计 。 


4.1.1 自助 建站 


自助 建站 就 是 通过 一 套 完善 、 智 能 的 系统 ， 让 不 会 建设 网 站 的 人 通过 一 些 非常 简单 的 操 
作 就 能 轻松 建立 自己 的 网 站 。 自 助 建站 一 般 是 将 已 经 做 好 的 网 站 (包含 非常 多 的 模板 及 非常 智 
能 化 的 控制 系统 ) 传 到 网 络 空间 上 。 购 买 了 自助 建站 服务 的 人 只 需要 登录 后 台 进 行 一 些 非常 简 
单 的 设置 ， 就 能 建立 其 个 性 化 的 网 站 。 

图 4-1 所 示 为 提供 自助 建站 服务 的 网 站 。“ 会 打字 就 能 建 网 站 ”是 自助 建站 方式 的 最 大 
亮点 。 一 个 会 简单 计算 机 操作 的 人 只 要 几 分 钟 就 能 快速 生成 一 个 企业 网 站 ， 甚 至 是 各 类 门户 
网 站 ， 这 就 是 自助 建站 所 提出 的 网 站 建设 理念 。 这 种 建站 方式 使 企 事 业 单位 能 够 快速 而 有 效 
地 以 “成 本 节约 、 简 单 易 用 、 维 护 方便 ”的 方式 来 建设 和 实施 其 先进 的 电子 商务 系统 ， 通 过 
有 效 地 应 用 互联 网 技术 来 提高 运作 效率 、 降 低 成 本 、 拓 展业 务 ， 从 而 实现 更 大 的 利润 和 效益 。 

图 4-2 所 示 为 提供 自助 建站 服务 的 网 站 中 展示 的 网 页 预览 效果 。 用 户 只 需要 找到 自己 所 
需 网 站 的 类 型 ， 然 后 选择 自己 喜欢 的 网 页 就 可 以 预览 效果 了 。 
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图 4-1 提供 自助 建站 服务 的 网 站 图 4-2 ”网 页 预览 效果 


4.1.2 智能 建站 


智能 建站 是 自助 建站 的 “升级 版 ”。 与 自助 建站 相 比 ， 智 能 建站 继承 了 其 易 上 手 、 成 本 
低 的 优点 ， 握 弃 了 其 功能 简单 、 呆 板 的 缺点 。 智 能 建站 系统 的 功能 十 分 强大 ， 可 以 比拟 大 型 
的 CMS( 内 容 管理 系统 ) 程 序 ， 还 能 够 自 定义 网 站 板块 功能 ， 使 原先 在 自助 建站 程序 上 不 具备 
的 购物 系统 、 在 线 支付 系统 、 权 限 系 统 、 产 品 发 布 系统 、 新 闻 系 统 、 会 员 系 统 等 功能 成 为 
现实 。 

图 4-3 所 示 为 提供 智能 建站 服务 的 网 站 ， 用 户 只 需要 在 网 页 左 侧 选择 自己 的 行业 分 类 ， 


就 可 以 在 右 侧 查看 该 网 站 已 经 做 好 的 网 页 模板 。 




















图 4-3 ”提供 智能 建站 服务 的 网 站 


4.1.3 专业 设计 


专业 设计 也 被 称 为 人 工 建站 。 人 工 建站 就 需要 网 站 建设 者 找 建 站 公司 按照 自己 的 要 求 设 
计 网 站 。 市 面 上 的 人 工 建站 价格 都 不 会 太 低 。 就 拿 搭建 一 个 最 简单 的 企业 网 站 来 说 ， 其 报价 
就 不 会 低 于 千 元 ， 这 其 中 还 不 包括 注册 域名 和 购买 主机 空间 的 费用 。 

不 过 ， 人 工 建 站 固然 成 本 很 高 ， 但 其 优势 也 是 显而易见 的 ， 因 为 人 工 建站 可 以 根据 网 站 
主 的 要 求 定制 ， 并 且 网 站 模板 可 以 任意 修改 ， 直 至 用 户 满意 为 止 。 但 是 ， 这 种 服务 是 “一 锤 
子 买 卖 ”， 即 网 站 交付 给 网 站 主 后 ， 如 果 出 现 漏洞 或 设计 问题 也 不 会 有 免费 售后 服务 。 相 对 
于 智能 建站 的 24 小 时 在 线 免费 技术 支持 ， 手 工 建站 的 安全 和 升级 问题 令 人 担忧 。 





4.2 建站 流程 


对 一 个 网 站 来 说 ， 除 了 网 页 内 容 以 外 ， 还 要 对 网 站 进行 整体 规划 设计 。 格 局 凌乱 的 网 
站 即使 内 容 再 精彩 ， 也 不 能 说 是 一 个 好 网 站 。 要 设计 出 一 个 精美 的 网 站 ， 前 期 的 规划 是 必 不 
可 少 的 。 


4.2.1 网 站 规划 


规划 站 点 就 像 设计 师 设 计 大 楼 一 样 ， 图 纸 设计 好 了 ， 才 能 建成 一 座 漂 亮 的 楼 房 。 规 划 站 
点 就 是 对 站 点 中 所 使 用 的 素材 和 资料 进行 管理 和 规划 ， 对 网 站 中 栏目 的 设置 、 颜 色 的 搭配 、 
版 面 的 设计 、 文 字 图 片 的 运用 等 进行 规划 。 

一 般 情况 下 ， 将 站 点 中 所 用 的 图 片 和 按钮 等 图 形 元 素 放 在 Images 文件 夹 中 ，HTML 文件 
放 在 根 目录 下 ， 而 动画 和 视频 等 放 在 Flash 文件 夹 中 。 另 外 ， 还 要 对 站 点 中 的 素材 进行 详细 的 
规划 ， 以 便于 日 后 管理 。 


加 上 讲理 J 隔 党 证 膨 水 泪 民 习 一 一 如 N 福 坦 喇 避 加 局 机 区 小 全 
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4.2.2 ”搜集 资料 


确定 了 网 站 风格 和 布局 后 ， 就 要 开始 搜集 
素材 了 。 常 言 道 ， “ 巧 妇 难为 无 米 之 炊 。” 要 
让 自己 的 网 站 有 声 有 色 、 能 吸引 人 ， 就 要 尽量 
搜集 素材 ， 包 括 文字 、 图 片 、 音 频 、 动 画 及 视 
频 等 。 搜 集 到 的 素材 越 充分 ， 制 作 网 站 就 越 容 
易 。 素 材 既 可 以 从 图 书 、 报 刊 、 光 盘 及 多 媒体 
上 得 来 ， 也 可 以 从 网 上 搜集 ， 还 可 以 自己 制 
作 ， 然 后 把 搜集 到 的 素材 去 粗 取 精 ， 选 出 制作 
网 页 所 需 的 素材 ， 如 图 4-4 所 示 。 

不 过 ， 在 搜集 图 片 素材 时 ， 一 定 要 注意 图 
片 的 大 小 。 因 为 在 网 络 中 传输 时 ， 图 片 的 容量 
越 小 ， 传 输 的 速度 就 越 快 ， 所 以 应 尽量 搜集 容 图 44 “搜索 网 站 素材 图 上 
量 小 、 画 面 精美 的 图 片 。 


4.2.3 制作 网 页 


制作 网 页 是 一 个 复杂 而 细致 的 过 程 ， 一 定 要 按照 先 大 后 小 、 先 简单 后 复杂 的 顺序 来 制 
作 。 所 谓 先 大 后 小 ， 是 指 在 制作 网 页 时 ， 先 把 大 的 结构 设计 好 ， 然 后 逐步 完善 小 的 结构 设 
计 。 所 谓 先 简单 后 复杂 ， 是 指 先 设计 出 简单 的 内 容 ， 然 后 设计 复杂 的 内 容 ， 以 便 出 现 问题 时 
能 及 时 修改 。 

进行 网 页 排版 时 ， 要 尽量 保持 网 页 风格 的 一 致 性 ， 不 至 于 在 网 页 跳 转 时 产生 不 协调 的 感 
觉 。 在 制作 网 页 时 灵活 地 运用 模板 ， 可 以 大 大 地 提高 制作 的 效率 。 将 相同 版 面 的 网 页 做 成 模 
板 ， 基 于 此 模板 创建 网 页 ， 以 后 想 改变 网 页 时 ， 只 需要 修改 模板 就 可 以 了 。 图 4-5 所 示 就 是 
一 个 主题 鲜明 的 网 页 ， 全 网 页 围绕 着 旅游 这 个 主题 来 安排 。 
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4-5 网 站 的 首页 


4.2.4 网 站 测试 


网 页 制作 完毕 后 ， 在 上 传 网 站 之 前 ， 要 在 浏览 器 中 打开 网 站 ， 逐 一 对 站 点 中 的 网 页 进行 
测试 ， 发 现 问题 要 及 时 修改 ， 然 后 再 上 传 。 


4.2.5 申请 域名 


网 站 建设 好 之 后 ， 就 要 在 网 上 给 网 站 注册 一 个 标识 ， 即 域名 。 申 请 域名 的 方法 很 多 。 用 
户 可 以 登录 域名 服务 商 的 网 站 ， 根 据 提示 申请 域名 。 域 名 有 免费 域名 和 收费 域名 两 种 。 用 户 
可 以 根据 实际 的 需要 进行 选择 。 


4.2.6 ”申请 空间 


域名 注册 成 功 之 后 就 需要 申请 网 站 空间 。 应 根据 不 同 的 网 站 类 型 选择 不 同 的 空间 。 

网 站 空间 有 免费 空间 和 收费 空间 两 种 。 对 个 人 网 站 的 用 户 来 说 ， 可 以 先 申请 免费 空间 使 
用 。 免 费 空间 只 需要 向 空间 提供 商 提出 申请 ， 得 到 答复 后 ， 按 照 说 明 上 传 主页 即 可 ， 主 页 的 
域名 和 空间 都 不 用 操心 。 使 用 免费 空间 美中不足 的 是 : 网 站 的 空间 有 限 ， 提 供 的 服务 一 般 ， 
空间 不 是 非常 稳定 ， 域 名 不 能 随心 所 欲 。 

对 商业 网 站 而 言 ， 用 户 需 要 考虑 空间 和 安全 性 等 因素 ， 为 此 可 以 选择 收费 空间 。 


4.2.7 ”网 站 备案 


网 站 备案 ( 见 图 4-6) 的 目的 是 防止 不 法 用 户 在 网 上 从 事 非 法 的 网 站 经 营 活动 ， 打 击 不 良 互联 
网 信息 的 传播 。 
不 管 是 经 营 性 还 是 非 经 营 性 的 网 站 均 需 要 备案 且 备 案 流程 基本 一 致 。 





4-6 网 站 备案 


网 站 备案 的 具体 流程 如 下 。 
ET 网 站 备案 的 途径 有 两 种 ， 一 种 是 网 站 主办 者 自己 登录 到 网 站 备案 系统 进行 备 
案 ， 另 一 种 是 通过 接 入 商 代为 备案 ， 如 图 4-7 所 示 。 


Dr 网 站 接 入 商 也 称 服务 器 提供 商 ， 就 是 提供 网 站 空间 的 服务 商 。 


并 财 稚 惑 丁 前 误 计 采 济 削 二 加 一 一 霹 久 答 址 潭 习 豪 章 乾 潍 时 
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EEJ29 通过 上 述 两 种 途径 ， 将 网 站 和 网 站 主办 者 的 信息 提交 给 提供 网 站 接 入 服务 的 服 
务 器 提供 商 ， 如 图 4-8 所 示 。 











网 站 主办 者 
备案 系统 
图 4-7 网 站 备案 的 方式 图 4-8 接 入 服务 单位 


服务 器 提供 商 对 网 站 主办 者 提供 的 信息 的 真实 性 进行 查验 ， 如 图 4-9 所 示 。 
EC 如 果 信息 有 误 ， 会 被 退回 ， 如 果 信息 正确 、 完 整 ， 服 务 器 提供 商会 将 信息 提交 
到 省 级 主管 部 门 的 信息 审核 系统 继续 审核 ， 如 图 4-10 所 示 。 


“E> ee 





接 入 识 审 横 准 史 数据 提交 
上 导 2 企业 系统 
到 / 
ee 网 站 主办 者 
4-9 “验证 网 站 备案 资料 4-10 ”审核 网 站 的 备案 信息 


区 于 BY 信息 在 省 级 部 门 系统 中 等 待 审核 ， 如 图 4-11 所 示 。 
ECEDUD9 如 果 备 案 信息 在 省 级 部 门 的 审核 中 通过 ， 将 发 放 网 站 备案 号 ， 如 图 4-12 所 示 。 





提 接 坷 和 
交 - 信 信 窜 
备 务 @ 站 中 
和 站 误 确 
8 和 | amezx FE 
| 审 人 [® 时 
: 省 人 
i 站 
图 4-11 等 待 审核 图 4-12 审核 通过 将 发 放 备案 号 


如 果 没 有 通过 省 级 部 门 的 审核 ， 信 息 会 返回 到 企业 系统 (服务 器 提供 商 ) 并 退回 给 
网 站 主办 者 ， 需 要 重新 提交 和 审核 网 站 备案 信息 。 如 果 通 过 审核 ， 则 省 级 部 门 的 备 
案 系 统 将 网 站 的 备案 信息 提交 到 国家 主管 部 门 的 网 站 备案 系统 中 保存 ， 同 时 网 站 的 
CPI 备案 过 程 完成 ， 如 图 4-13 所 示 。 
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4-13 ”网 站 备案 完成 











4.2.8 发 布 网 页 


在 一 切 前 期 的 准备 工作 都 做 好 后 ， 再 经 过 网 站 的 测试 ， 接 下 来 就 可 以 发 布 网 页 了 。 发 布 
网 页 也 称 为 上 传 网 站 ， 一 般 使 用 FTP 协议 来 上 传 ， 即 以 远程 文件 传输 方式 上 传 到 服务 器 中 申 
请 的 域名 之 下 。 常 用 的 FTP 上 传 工 具有 FlashFXP、CuteFTP 和 LeapFTP。 另 外 ， 还 可 以 直接 
使 用 网 页 制作 工具 Dreamweaver CC 提供 的 上 传 和 下 载 功 能 来 发 布 网 页 。 


4.2.9 网 站 推广 和 维护 


1. 网 站 推广 

网 站 制作 好 之 后 ， 还 要 不 断 地 对 其 进行 宣传 ， 这 样 才能 让 更 多 人 认识 它 ， 以 提高 网 站 的 
访问 率 和 知名 度 。 推 广 的 方法 很 多 ， 如 到 搜索 引擎 上 注册 、 与 别 的 网 站 交换 链接 或 加 入 广告 
链接 等 。 

网 站 推广 是 企业 网 站 获得 有 效 访问 的 重要 步骤 ， 合 理 而 科学 的 推广 计划 能 令 企业 网 站 收 
到 预期 的 宣传 效果 。 网 站 推广 作为 电子 商务 服务 的 一 个 独立 分 支 正 显示 出 其 巨大 的 魅力 ， 并 
越 来 越 引 起 企业 的 高 度 重视 和 关注 。 


2. 网 站 维护 


网 站 维护 包括 服务 器 及 相关 软 硬 件 的 维护 、 数 据 库 的 维护 、 网 站 安全 维护 、 网 站 内 容 更 
新 等 。 网 站 维护 是 为 了 让 网 站 能 够 长 期 稳定 地 运行 ， 并 不 断 吸引 更 多 浏览 者 ， 增 加 访问 量 。 
网 站 要 注意 经 常 更 新 内 容 ， 保 持 内 容 的 新 鲜 ， 不 要 做 好 就 放 在 那儿 不 变 了 。 只 有 不 断 地 
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给 它 补充 新 的 内 容 ， 才 能 够 吸引 浏览 者 ， 并 给 浏览 者 留 下 良好 的 印象 ， 只 有 不 断 地 更 新 内 
容 ， 才 能 使 网 站 保持 生命 力 。 和 否则 ， 网 站 不 仅 不 能 起 到 应 有 的 作用 ， 反 而 会 对 网 站 自身 的 形 
象 造 成 不 良 的 影响 。 


4.3 制作 网 页 的 常用 软件 


制作 单一 的 网 页 直接 应 用 某 个 软件 即 可 完成 ， 但 要 制作 出 生动 有 趣 的 网 页 ， 则 需要 有 : 
图 像 处理 软 件 ， 如 Photoshop; 动画 制作 软件 ， 如 Flash; 网 页 布局 软件 ， 如 Dreamweaver 
等 。 对 一 个 专业 的 网 页 设计 人 员 来 说 ， 在 建设 一 个 网 站 的 过 程 中 会 同时 应 用 到 
Dreamweaver、Flash 和 Photoshop 这 3 种 软件 。 


4.3.1 案例 1 一 一 认识 网 页 布局 软件 Dreamweaver CC 


Adobe Dreamweaver CC 是 一 款 集 网 页 制作 和 管理 网 站 于 一 体 的 所 见 即 所 得 的 网 页 编辑 
器 ， 用 户 不 需要 编写 复杂 的 代码 ， 利 用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 浏览 器 
限制 的 充满 动感 的 网 页 。 

Dreamweaver 是 一 款 优秀 的 可 视 化 网 页 制作 工具 ， 即 便 是 那些 既 不 懂 HTML， 也 没有 进 
行 过 程序 设计 的 用 户 ， 也 可 以 很 容易 上 手 ， 轻 松 制 作出 自己 的 精彩 网 页 。 

Dreamweaver CC 的 工作 界面 继承 了 原版 本 的 一 贯 风格 ， 有 方便 编辑 的 窗口 环境 和 易于 辨 
别 的 工具 列表 ， 无 论 在 使 用 什么 功能 时 出 现 问 题 ， 都 可 以 找到 相关 的 帮助 信息 ， 便 于 初学 者 
使 用 。Dreamweaver CC 的 工作 界面 如 图 4-14 所 示 。 


[DW zan smn EM WA exw WO eon man ew um mi. Eh Ool = 











CIE IEE  " E 





























图 4-14 Dreamweaver CC 的 工作 界面 
4.3.2 ”案例 2 一 一 认识 图 像 处 理 软件 Photoshop CC 


Photoshop CC 是 Adobe 公司 旗下 最 为 出 名 的 图 像 处 理 软件 之 一 。Photoshop 功能 强大 ， 操 
作 界 面 友好 ， 加 速 了 设计 者 从 想象 创作 到 图 像 实现 的 过 程 ， 赢 得 了 众多 用 户 的 青睐 。 从 功能 
上 看 ，Photoshop 可 分 为 图 像 编 辑 、 图 像 合成 、 校 色调 色 及 特效 制作 4 个 部 分 。 


全 5 





(1) 图 像 编 辑 是 图 像 处 理 的 基础 。Photoshop 可 用 于 对 图 像 进行 各 种 变换 ， 如 放大 、 缩 
小 、 旋 转 、 倾 斜 、 镜 像 、 透 视 等 ， 也 提供 复制 、 去 除 斑点 、 修 补 、 修 饰 等 编辑 功能 。 

(2) 图 像 合成 是 指 将 几 幅 图 像 通过 图 层 操作 、 工 具 应 用 等 合成 为 完整 的 、 传 达 明 确 意 义 
的 一 幅 图 像 ， 这 是 美术 设计 的 必 经 之 路 。Photoshop 提供 的 绘图 工具 可 以 将 外 来 图 像 与 创意 进 
行 很 好 的 融合 ， 使 图 像 的 合成 天 衣 无 缝 。 

(3) 校 色调 色 是 Photoshop 中 深 具 威力 的 功能 之 一 ， 可 方便 快捷 地 对 图 像 的 颜色 进行 明 
暗 、 色 调 的 调整 和 校正 ， 也 可 在 不 同 颜 色 之 间 进 行 切换 ， 以 满足 图 像 在 不 同 领 域 (如 网 页 设 
计 、 印 刷 、 多 媒体 等 ) 中 的 应 用 。 

(4) 特效 制作 在 Photoshop 中 主要 由 滤 镜 、 通 道 及 工具 的 综合 应 用 完成 ， 包 括 图 像 的 特效 
创意 和 特效 字 的 制作 。 油 画 、 浮 雕 、 石 膏 画 、 素 描 等 常用 的 传统 美术 技巧 都 可 借助 于 
Photoshop 特效 完成 ， 而 各 种 特效 字 的 制作 更 是 很 多 美术 设计 师 热衷 于 Photoshop 的 原因 。 

了 Photoshop CC 的 工作 界面 如 图 4-15 所 示 。 
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图 4-15 ”Photoshop CC 的 工作 界面 


4.3.3 ”案例 3 一 一 认识 动画 制作 软件 Flash CC 


Flash 作为 一 种 创作 工具 ， 可 供 设 计 人 员 和 开发 人 员 用 于 创建 动画 、 视 频 、 演 示 文 稿 、 应 
用 程序 和 其 他 允许 用 户 交 互 的 内 容 。 

Flash 软件 可 以 实现 多 种 动画 特效 。 动 画 是 由 一 帧 帧 的 静态 图 片 在 短 时 间 内 连续 播放 而 形 
成 的 视觉 效果 ， 是 表现 动态 过 程 、 阐 明 抽 象 原理 的 一 种 重要 媒体 。Adobe Flash CC 的 工作 界 
看 如 图 4-16 所 示 。 
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图 4-16 Flash CC 的 工作 界面 


4.4 综合 案例 一 一 网 页 制作 软件 间 的 相互 关系 


网 页 中 包含 着 多 种 类 型 的 页 面 元 素 ， 要 制作 出 漂亮 、 生 动 的 网 页 ， 是 不 能 仅仅 靠 一 种 软 
件 实现 的 。 因 此 ， 在 设计 网 站 的 过 程 中 ， 需 要 把 多 种 软件 结合 起 来 使 用 。 通 常 使 用 的 软件 有 
上 面 介绍 的 Dreamweaver、Flash、Photoshop 等 。 对 大 型 网 站 管理 者 来 说 ， 综 合 使 用 这 些 软 件 
会 提高 网 页 的 制作 速度 ， 从 而 提高 工作 效率 。 

在 网 页 设计 中 ，Dreamweaver 主要 用 于 对 页 面 进行 布局 ， 即 将 创建 完成 的 文字 、 图 像 和 
动画 等 元 素 在 Dreamweaver 中 通过 一 定形 式 的 布局 整合 为 一 个 页 面 。 此 外 ， 在 Dreamweaver 
中 还 可 以 方便 地 插入 Flash、ActiveX、JavaScript、Java 和 Shockwave 等 文件 ， 从 而 使 设计 者 
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4-17 在 Dreamweaver 中 插入 动画 
如 果 网 页 中 只 有 静止 的 图 像 ， 即 使 这 些 图 像 很 精致 ， 也 会 让 人 感觉 缺少 生动 性 和 活泼 


性 ， 最 终 会 影响 视觉 效果 和 整个 页 面 的 美观 。 因 此 ， 在 网 页 制作 过 程 中 往往 还 需要 适时 地 插 
入 一 些 Flash 图 像 。 

在 一 般 网 页 设计 中 ，Flash 主要 用 于 制作 具有 动画 效果 的 导航 条 、Logo、 商 业 广 告 条 等 。 
动画 可 以 更 好 地 表现 设计 者 的 创意 。 由 于 学 习 Flash 本 身 的 难度 不 大 ， 而 且 制 作 含 有 Flash 动 
画 的 页 面 很 容易 吸引 浏览 者 ， 所 以 Flash 动画 已 成 为 当前 网 页 设计 中 不 可 或 缺 的 元 素 。 如 图 4-18 
所 示 为 在 Flash CC 中 播放 动画 。 

使 用 Photoshop， 除 了 可 以 对 网 页 中 要 插入 的 图 像 进行 调整 处 理 外 ， 还 可 以 对 页 面 的 总 体 
布局 进行 调整 。 对 网 页 中 所 出 现 的 GIF 图 像 也 可 使 用 Photoshop CC 进行 创建 ， 以 获得 更 加 精 
彩 的 效果 。 如 图 4-19 所 示 即 为 用 Photoshop 制作 的 网 页 图 片 。 





图 4-18 在 Flash CC 中 播放 动画 4-19 用 Photoshop 制作 的 网 页 图 片 


Photoshop 还 可 以 用 于 对 创建 Flash 动画 所 需 的 素材 进行 制作 、 加 工 和 处 理 等 操作 ， 使 网 
页 动画 中 所 表现 的 内 容 更 加 精美 和 引人入胜 。 





4.5 疑难 解 惑 


疑问 1: 常见 的 域名 选取 策略 是 什么 ? 


答 : 域名 是 连接 企业 和 互联 网 网 址 的 纽带 ， 对 于 企业 开展 电子 商务 具有 重要 作用 ， 被 誉 
为 网 络 时 代 的 “环球 商标 ”。 一 个 好 的 域名 会 大 大 增加 企业 在 互联 网 上 的 知名 度 ， 因 此 ， 取 
一 个 好 的 域名 就 显得 十 分 重要 。 域 名 选取 的 常见 方法 如 下 。 

(1) 用 企业 名 称 的 英文 翻译 作为 网 站 的 域名 

这 是 许多 企业 选取 域名 的 一 种 方式 ， 这 样 的 域名 特别 适合 于 与 计算 机 、 网 络 和 通信 相关 的 一 
些 行业 。 例 如 ， 中 国电 信 的 域名 是 chinatelecom.com.cn， 中 国 移动 的 域名 为 chinamobile.com， 都 
是 采用 了 此 种 原则 。 

(2) 用 企业 名 称 的 汉语 拼音 作为 网 站 的 域名 

这 是 国内 企业 常见 的 域名 选取 方法 。 这 种 方法 的 最 大 好 处 是 容易 记忆 。 例 如 ， 
huawei.com 是 华为 技术 有 限 公 司 的 域名 ，haier.com 是 海尔 集团 的 域名 。 
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(3) 用 汉语 拼音 的 谐音 作为 网 站 的 域名 。 
在 现实 中 ， 采 用 这 种 方法 的 企业 也 不 在 少数 。 例 如 ， 美 的 集团 的 域名 为 midea.com.cn， 
康佳 集团 的 域名 为 konka.com.cn， 新 浪 的 域名 为 sina.com.cn。 


疑问 2: 如 何在 网 上 搜索 特定 格式 的 文件 资料 ? 


答 : 在 网 上 搜索 资料 时 ， 有 时 需要 搜索 特定 格式 的 文件 ， 如 PPT 文件 、Word 文件 等 。 这 
里 以 搜索 .doc 格式 的 文件 为 例 ， 介 绍 搜索 特定 格式 文件 的 方法 。 

打开 百度 搜索 页 面 ， 在 搜索 文本 框 中 输入 “网 页 制作 .doc”， 单 击 【 百 度 一 下 】 按 钮 ， 系 
统 将 打开 搜索 结果 页 面 。 这 里 最 重要 的 一 点 就 是 在 输入 搜索 关键 字 时 ， 后 面 一 定 要 加 上 特定 
格式 文件 的 后 级 名 。 








制作 静态 网 


第 5 章 ” 磨 刀 不 误 砍 柴 工 一 一 使 用 Dreamweaver CC 


创建 站 点 
第 6 章 ”制作 我 的 第 一 个 网 页 一 一 使 用 文本 丰富 网 页 
内 容 


第 7 章 有 图 有 真相 一 一 使 用 图 像 与 多 媒体 网 页 元 素 
第 8 章 不 在 网 页 中 迷路 一 一 设计 网 页 中 的 超 链 接 
第 9 章 ”让 网 页 互动 起 来 一 一 使 用 网 页 表单 和 行为 


第 5 章 
魔 刀 不 误 砍 柴 工 一 一 
使 用 Dreamweaver 


CC 创建 站 点 


Dreamweaver CC 是 一 款 专业 的 网 页 编辑 软件 ， 利 用 它 可 以 创建 网 页 。 其 强大 
的 站 点 管理 功能 ， 合 理 的 站 点 结构 能 够 加 快 对 站 点 的 设计 ， 提 高 工作 效率 ， 节 省 时 
间 。 本 章 主要 介绍 如 何 利 用 Dreamweaver CC 创建 并 管理 网 站 站 点 。 
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5.1 认识 Dreamweaver CC 


在 学 习 如 何 使 用 Dreamweaver CC 制作 网 页 之 前 ， 先 来 认识 一 下 Dreamweaver CC 的 工作 
环境 。 


5.1.1 启动 Dreamweaver CC 


完成 Dreamweaver CC 的 安装 后 ， 就 可 以 启动 Dreamweaver CC 了 。 有 具体 操作 步骤 如 下 。 

ED 选择 【开始 】 一 Adobe Dreamweaver CC 选项 ， 或 双击 桌面 上 的 Dreamweaver CC 
快捷 图 标 ， 如 图 5-1 所 示 ， 即 可 启动 Dreamweaver CC。 

进入 Dreamweaver CC 的 初始 化 界面 。Dreamweaver CC 的 初始 化 界面 时 尚 、 大 
方 ， 给 人 以 焕然 一 新 的 感觉 ， 如 图 5-2 所 示 。 


Adobe Dreamweaver CC 


三 最 近 添加 


Minecraft Windows 10 Edition 


获取 Office 





5-1 启动 Dreamweaver CC 图 5-2 Dreamweaver CC 的 初始 化 界面 
ES 通过 初始 化 界面 ， 便 可 打开 Dreamweaver CC 工作 区 的 开始 界面 。 在 默认 情况 
下 ，Dreamweaver CC 的 工作 区 布局 是 以 【设计 】 视 图 布局 的 ， 如 图 5-3 所 示 。 
ES 在 开始 页 面 中 ， 单 击 【新 建 】 栏 下 方 的 HTML 选项 ， 即 可 打开 Dreamweaver CC 
的 工作 界面 ， 如 图 5-4 所 示 。 






































图 5-3 Dreamweaver CC 的 开始 界面 5-4 Dreamweaver CC 的 工作 界面 


5.1.2 ”认识 Dreamweaver CC 的 工作 区 


在 Dreamweaver CC 的 工作 区 中 可 查看 到 文档 和 对 象 属性 。 工 作 区 将 许多 常用 的 操作 放置 
于 工具 栏 中 ， 便 于 快速 地 对 文档 进行 修改 。Dreamweaver CC 的 工作 区 主要 由 应 用 程序 栏 、 菜 
单 栏 、【 插 入 】 面 板 、 文 档 工 具 栏 、 文 档 窗口 、 状 态 栏 、【 属性 】 面 板 和 面板 组 等 部 分 组 
成 ， 如 图 5-5 所 示 。 








[DW sem eo mw Mn Saw m0) woo we ecw wm em. Cd Ol-lol x 
i 县 















[om -~ 
EI en 
































图 5-5 Dreamweaver CC 的 工作 区 
1. 菜单 栏 


该 部 分 包括 10 个 菜单 ， 单 击 每 个 菜单 标签 ， 会 弹出 下 拉 菜单 ， 利 用 菜单 中 的 命令 基本 上 
能 够 实现 Dreamweaver CC 的 所 有 功能 ， 如 图 5-6 所 示 。 


文件 (日 ”编辑 (E) 坦 看 (V) 插入 (I) 修改 (M) 格式 (0) 命令 (Q 站 点 (S) 窗口 (W) 者 助 (H) ， 
图 5-6 菜单 栏 
2. 文档 工具 栏 


该 部 分 包含 3 种 文档 窗口 视图 (代码 、 拆 分 和 设计 ) 按 钮 、 各 种 查看 选项 和 一 些 常 用 的 操作 
功能 (如 在 浏览 器 中 预览 )， 如 图 5-7 所 示 。 
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5-7 文档 工具 栏 


文档 工具 栏 中 常用 按钮 的 功能 如 下 。 
(CD 【显示 代码 视图 】 按 钮 E 画 :， 单 击 该 按钮 ， 仅 在 文档 窗口 中 显示 和 修改 HTML 源 
代码 。 
(2) 【显示 代码 视图 和 设计 视图 】 按 钮 项 富 ， 单 击 该 按钮 ， 在 文档 窗口 中 同时 显示 
HTML 源 代码 和 页 面 的 设计 效果 。 
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(3) 【显示 设计 视图 】 按 钮 设计 ， 单 击 该 按钮 ， 仅 在 文档 窗口 中 显示 网 页 的 设计 效果 。 

(4) 【实时 视图 】 按 钮 。 单 击 该 按钮 ， 显 示 不 可 编辑 的 、 交 互 式 的、 基于 浏览 器 的 文档 
视图 。 | 

(5) 【在 浏览 器 中 预览 /调试 】 按 钮 屋 。， 单 击 该 按钮 ， 可 在 定义 好 的 浏览 器 中 预览 或 调 
试 网 页 。 

(6) 【文档 标题 】 文 本 框 考 村 5 :该 文本 框 用 于 设置 或 修改 文档 的 标题 。 

(7) 【文件 管理 】 按 钮 同 : 单 击 该 按钮 ， 通 过 弹出 的 菜单 可 实现 消除 只 读 属 性 、 获 取 、 
取出 、 上 传 、 存 回 、 撤 销 取 出 、 设 计 备注 以 及 在 站 点 定位 等 功能 。 


3. 文档 窗口 


文档 窗口 用 于 显示 当前 创建 和 编辑 的 文档 。 在 该 窗口 中 ， 既 可 以 输入 文字 、 插 入 图 片 、 
绘制 表格 等 ， 也 可 以 对 整个 页 面 进行 处 理 ， 如 图 5-8 所 示 。 














图 5-8 文档 窗口 


4. 状态 栏 


状态 栏 位 于 文档 窗口 的 底部 ， 包 括 两 个 功能 区 : 标签 选择 器 (用 于 显示 和 控制 文档 当前 插 
入 点 位 置 的 HTML 源 代码 标记 )、 窗 口 大 小 弹出 菜单 (用 于 显示 页 面 大 小 ， 允 许 将 文档 窗口 的 
大 小 调整 到 预定 义 或 自 定义 的 尺寸 )， 如 图 5-9 所 示 。 


Ee 日 画 画 zxoxamv 二 
图 5-9 状态 栏 





5. 【属性 】 面 板 


【 属性】 面板 是 网 页 中 非常 重要 的 面板 ， 用 于 显示 在 文档 窗口 中 所 选 元 素 的 属性 ， 并 且 
可 以 对 被 选中 的 元 素 的 属性 进行 修改 。 该 面板 随 着 选择 元 素 的 不 同 而 显示 不 同 的 属性 ， 如 
图 5-10 所 示 。 


6. 【插入 】 面 板 
【插入 】 面 板 包含 将 各 种 网 页 元 素 (如 图 像 、 表 格 、AP 元 素 等 ) 插 入 到 文档 时 的 快捷 按 


钮 。 每 个 对 象 都 是 一 段 HTML 代码 ， 插 入 不 同 的 对 象 时 ， 可 以 设置 不 同 的 属性 。 单 击 相应 的 
按钮 ， 可 插入 相应 的 元 素 。 要 显示 【插入 】 面 板 ， 选 择 【 窗 口 】 一 【插入 】 命 令 即 可 ， 如 
图 5-11 所 示 。 
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图 5-10 【属性 】 面板 
7. 【文件 】 面 板 


【文件 】 面 板 用 于 管理 文件 和 文件 夹 ， 无 论 它们 是 Dreamweaver 站 点 的 一 部 分 ， 还 是 位 
于 远程 服务 器 上 。 在 【文件 】 面 板 上 还 可 以 访问 本 地 磁盘 上 的 全 部 文件 ， 如 图 5-12 所 示 。 
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图 5-11 【插入 】 面 板 图 5-12 【文件 】 面 板 


5.1.3 体验 Dreamweaver CC 的 新 增 功能 


Dreamweaver CC 是 Dreamweaver 的 最 新 版 本 ， 它 同 以 前 的 Dreamweaver CS6 版 本 相 
比 ， 增 加 了 一 些 新 的 功能 ， 并 且 还 增强 了 很 多 原 有 的 功能 。 下 面 就 对 Dreamweaver CC 的 新 
增 功能 进行 简单 的 介绍 ， 带 领 读者 一 起 体验 这 些 新 增 功能 。 


1. CSS 设计 器 


Dreamweaver CC 新 增 了 CSS 设计 器 功能 一 一 高 度 直 观 的 
可 视 化 编辑 工具 ， 不 仅 可 以 帮助 用 户 生成 Web 标准 的 代码 ， 还 
可 以 快速 查看 和 编辑 与 特定 上 下 文 有 关 的 样式 ， 如 图 5-13 所 示 。 


2. 云 同 步 


Dreamweaver CC 新 增 了 云 同 步 功 能 。 通 过 该 功能 ， 用 户 可 
以 在 Creative Cloud 上 存储 文件 、 应 用 程序 和 站 点 定义 。 当 需 
要 时 只 需要 登录 Creative Cloud 即 可 随时 随地 访问 它们 。 图 5-13 CSS 设计 器 
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在 Dreamweaver CC 界面 中 ， 选 择 【 编 辑 】 一 【首选 项 】 命 令 , 打开 【首选 项 】 对 话 框 ， 
在 【分 类 】 列 表 框 中 选择 【同步 设置 】 选 项 ， 即 可 在 右 侧 的 窗口 中 设置 云 同 步 ， 如 图 5-14 所 示 。 
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图 5-14 【首选 项 】 对 话 框 
3. 支持 新 平台 
Dreamweaver CC 对 HTML 5、CSS 3、jQuery 和 jQuery Mobile 的 支持 更 灵活 且 更 完善 。 
4. 用 户 界面 简化 


对 工作 界面 进行 了 全 新 的 简化 ， 减 少 了 对 话 框 的 数量 和 很 多 不 必要 的 操作 按钮 ， 如 对 文 
档 工具 栏 和 状态 栏 都 进行 了 精简 ， 使 得 整个 工作 界面 显得 更 加 简洁 。 


5. 插入 【画布 】 功 能 


在 Dreamweaver CC 的 【常用 】 面 板 中 新 增 了 【画布 】 插 入 按钮 。 单 击 【 插 入 】 选 项 
卡 ， 然 后 在 【常用 】 面 板 中 单 击 【 画 布 】 按 钮 ， 即 可 快速 地 在 网 页 中 插入 HTML 5 画布 元 
素 ， 如 图 5-15 所 示 。 

6. 新 增 网 页 结构 元 素 

在 Dreamweaver CC 中 新 增 了 HTML 5 结构 语义 元 素 的 插入 操作 按钮 ， 它 们 位 于 【 插 
入 】 选 项 卡 中 的 【结构 】 面 板 中 ， 包 括 “ 页 眉 ”“ 标 题 ”、Navigation( 导 航 )、“ 侧 边 ”“ 文 
章 ”“ 章 节 ” 和 “页 脚 ” 等 ， 如 图 5-16 所 示 。 通 过 这 些 按钮 ， 可 以 快速 地 在 网 页 中 插入 
HTML 5 语义 标签 。 

7. 新 增 Edge Web Fonts 

在 Dreamweaver CC 中 新 增 了 Edge Web Fonts 的 功能 ， 在 网 页 中 可 以 加 载 Adobe 提供 的 





EdgeWeb 字体 ， 从 而 在 网 页 中 实现 特殊 字体 效果 。 依 次 选择 【修改 】 一 【管理 字体 】 命 令 ， 
从 打开 的 【管理 字体 】 对 话 框 中 选择 Adobe Edge Web Fonts 选项 卡 ， 即 可 使 用 Adobe 提供 的 
Edge Web 字体 ， 如 图 5-17 所 示 。 
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图 5-15 单 击 【画布 】 按 钮 5-16 ”新 增 网 页 结构 元 素 


8. 在 【媒体 】 面 板 中 新 增 HTML 5 音频 和 视频 按钮 


Dreamweaver CC 提供 了 对 HTML 5 更 全 面 、 更 便捷 的 支持 。 用 户 可 以 通过 新 增 的 
HTML 5 音频 和 视频 插入 按钮 ， 如 图 5-18 所 示 ， 在 网 页 中 轻松 插入 HTML 5 音频 和 视频 ， 而 
不 需要 编写 HTML 5 代码 。 
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5-17 Adobe Edge Web Fonts 选项 卡 5-18 HTML 5 Video 按钮 和 HTML 5 Audio 按钮 


9. 在 【媒体 】 面 板 中 新 增 Adobe Edge Animate 动画 


在 【媒体 】 面 板 中 新 增 了 Adobe Edge Animate 动画 。 在 默认 情况 下 ， 用 户 在 
Dreamweaver 中 插入 Adobe Edge Animate 动画 后 ， 会 自动 在 当前 站 点 的 根 目 录 中 生成 一 个 名 





【媒体 】 面 板 中 


色 ”“ 月 ”“ 周 
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为 edgeanimate assets 的 文件 夹 ， 将 Adobe Edge Animate 动画 的 提取 内 容 放 入 该 文件 夹 中 。 
如 果 需 要 在 Dreamweaver CC 中 插入 Adobe Edge Animate 动画 ， 可 以 单 击 【 插 入 】 选 项 卡 


的 【Edge Animate 作品 】 按 钮 ， 如 图 5-19 所 示 。 


10. 新 增 表单 输入 类 型 
在 Dreamweaver CC 中 新 增 了 许多 HTML 5 表单 输入 类 型 ， 如 “数字 ”“ 范 围 ”“ 颜 


”“ 日 期 ”“ 时 间 ”“ 日 期 时 间 ” 和 “日 期 时 间 ( 当 地 )”， 如 图 5-20 所 示 。 


单 击 相应 的 按钮 ， 即 可 在 页 面 中 插入 相应 的 HIML 5 表单 输入 类 型 。 
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图 5-19 单 击 【Edge Animate 作品 】 按 钮 图 5-20 新 增 表单 输入 类 型 


5.2 创建 站 点 


一 般 在 制作 网 页 之 前 都 需要 先 创建 站 点 ， 这 是 为 了 更 好 地 利用 站 点 对 文件 进行 管理 ， 可 
以 尽 可 能 减少 链接 与 路 径 方面 的 错误 。 下 面 介 绍 创建 本 地 站 点 和 使 用 高 级 面板 创建 站 点 的 


方法 。 
5.2.1 案例 


1 一 一 创建 本 地 站 点 


使 用 向 导 创 建 本 地 站 点 的 具体 操作 步骤 如 下 。 


四 TP> 户 


动 Dreamweaver CC， 然 后 依次 选择 【站 点 】 一 【新 建站 点 】 命 令 ， 即 可 打开 


【站 点 设置 对 象 我 的 站 点 】 对 话 框 ， 从 中 输入 站 点 的 名 称 ， 并 设置 本 地 站 点 文件 夹 
的 路 径 和 名 称 ， 如 图 5-21 所 示 。 

EECDRP9 单 击 【保存 】 按 钮 ， 即 可 完成 本 地 站 点 的 创建 ， 在 【文件 】 面 板 中 【本 地 文 
件 】 的 下 方 会 显示 该 站 点 的 根 目录 ， 如 图 5-22 所 示 。 
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图 5-21 【站 点 设置 对 象 我 的 站 点 】 对 话 框 图 5-22 站 点 根 目 录 


5.2.2 ”案例 2 一 一 创建 远程 站 点 


在 远程 服务 器 上 创建 站 点 ， 需 要 在 远程 服务 器 上 指定 远程 文件 夹 的 位 置 ， 该 文件 夹 将 存 
储 生 产 、 协 作 、 部 署 等 方案 的 文件 。 
创建 远程 站 点 的 具体 操作 步骤 如 下 。 
EDDD 选择 【站 点 】 一 【新 建站 点 】 命 令 ， 在 弹出 的 【站 点 设置 对 象 未 命名 站 点 2】 
对 话 框 中 设置 【站 点 名 称 】 和 【本 地 站 点 文件 夹 】， 如 图 5-23 所 示 。 
区 TY 切换 到 【服务 器 】 选 项 卡 ， ,wi 
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图 5-23 【站 点 设置 对 象 未 命名 站 点 2】 对 话 框 图 5-24 【服务 器 】 选 项 卡 


EEC 在 打开 的 对 话 框 中 设置 【服务 器 名 称 】， 然 后 选择 连接 方法 ， 如 果 网 站 的 空间 
已 经 购买 完成 ， 可 以 选择 连接 方法 为 FTP， 然 后 设置 【FTP 地 址 】、【 用 户 名 】 和 
【密码 】 等 ， 如 图 5-25 所 示 。 

EEC 切换 到 【高 级 】 选 项 卡 ， 根 据 需 要 设置 远程 服务 器 的 高 级 属性 ， 然 后 单 击 【 保 
存 】 按 钮 即 可 ， 如 图 5-26 所 示 。 

EEJD 返回 【站 点 设置 对 象 远程 站 点 】 对 话 框 中 ， 在 其 中 可 以 看 到 新 建 的 远程 服务 器 
的 相关 信息 ， 单 击 【 保 存 】 按 钮 ， 如 图 5-27 所 示 。 
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5-25 【基本 】 选 项 卡 图 5-26 【高 级 】 选 项 卡 


ECGUB 站 点 创建 完成 ， 在 【文件 】 面 板 中 【本 地 文件 】 的 下 方 会 显示 该 站 点 的 根 目 
录 ， 如 图 5-28 所 示 。 单 击 【 连 接 到 远 端 主机 】 按 钮 鳃 |， 即 可 连接 到 远程 服务 器 。 
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图 5-28 【文件 】 面板 


图 5-27 单 击 【 保 存 】 按 钮 


5.3 管理 站 点 
在 创建 完 站 点 以 后 ， 还 可 以 对 站 点 进行 多 方面 的 管理 ， 如 打开 站 点 、 编 辑 站 点 、 删 除 站 
点 、 复 制 站 点 等 。 
5.3.1 案例 3 一 一 打开 站 点 


打开 站 点 的 具体 操作 步 又 如 下 。 
EE 在 Dreamweaver CC 工作 界面 中 ， 依 次 选择 【站 点 】 【管理 站 点 】 命 令 ， 如 


图 5-29 所 示 。 
EEJ29 即 可 打开 【管理 站 点 】 对 话 框 ， 然 后 选择 【您 的 站 点 】 列 表 框 中 的 【我 的 站 


点 】 选 项 ， 如 图 5-30 所 示 。 最 后 单 击 【 完 成 】 按 钮 ， 即 可 打开 站 点 。 
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图 5-29 选择 【管理 站 点 】 命 令 


5.3.2 案例 4 一 一 编辑 站 点 


对 于 创建 后 的 站 点 ， 还 可 以 对 其 属性 进行 编辑 。 具 体 
操作 步骤 如 下 。 

ED 在 Dreamweaver CC 工作 界面 的 右 侧 选择 
【文件 】 选 项 卡 ， 然 后 单 击 【 我 的 站 点 】 文 本 框 
右 侧 的 下 拉 按 钮 ， 从 弹出 的 下 拉 菜 单 中 选择 【 管 
理 站 点 】 命 令 ， 如 图 5-31 所 示 。 

EEIP29 即 可 打开 【管理 站 点 】 对 话 框 ， 从 中 选 定 要 
编辑 的 站 点 名 称 ， 然 后 单 击 【编辑 当前 选 定 的 
站 点 】 按 钮 回 ， 如 图 5-32 所 示 。 















































5-32 单 击 【 编 辑 当 前 选 定 的 站 点 】 按 钮 
ETE> 即 可 打开 【站 点 设置 对 象 我 的 站 点 】 对 话 框 ， 在 该 对 话 框 中 按照 创建 站 点 的 方 
法 对 站 点 进行 编辑 ， 如 图 5-33 所 示 。 
本 TL》 单 击 【保存 】 按 钮 ， 返 回 到 【管理 站 点 】 对 话 框 ， 然 后 单 击 【完成 】 按 钮 ， 即 


5 傅 
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可 完成 编辑 操作 ， 如 图 5-34 所 示 。 


a 王 TS 















































已 了 EE 
ET | 
EE 
Cm | Cm] I | [| 
图 5-33 【站 点 设置 对 象 我 的 站 点 】 对 话 框 5-34 【管理 站 点 】 对 话 框 


5.3.3 ”案例 5 一 一 删除 站 点 


如 果 不 再 需要 创建 的 站 点 ， 可 以 将 其 从 站 点 列表 中 删除 。 具 体操 作 步 骤 如 下 。 

ED 选中 要 删除 的 本 地 站 点 ， 然 后 单 击 【 管 理 站 点 】 对 话 框 中 的 【删除 当前 选 定 的 
站 点 】 按 钮 局 ， 如 图 5-35 所 示 。 

TY 此 时 系统 会 弹出 警告 提示 框 ， 如 图 5-36 所 示 ， 提 示 用 户 不 能 撤销 删除 操作 ， 询 
问 是 否 要 删除 选中 的 站 点 ， 单 击 【 是 】 按 钮 ， 即 可 将 选中 的 站 点 删除 。 


尖 








Dreamweaver 
,We 
a 
图 5-35 单 击 【删除 当前 选 定 的 站 点 】 按 钮 图 5.36 敬告 提示 杠 




















5.3.4 ”案例 6 一 一 复制 站 点 


如 果 想 创建 多 个 结构 相同 或 类 似 的 站 点 ， 则 可 利用 站 点 的 可 复制 性 来 实现 。 复 制 站 点 的 
具体 操作 步骤 如 下 。 


EEIDp 在 【管理 站 点 】 对 话 框 中 单 击 【 复 制 当 前 选 定 的 站 点 】 按 钮 加 ， 如 图 5-37 
所 示 。 

攻 于 2 即 可 复制 该 站 点 ， 复 制 出 的 站 点 会 出 现在 【您 的 站 点 】 列 表 框 中 ， 且 该 名 称 在 
原 站 点 名 称 的 后 面 会 添加 “复制 ”字样 ， 如 图 5-38 所 示 。 




































































5-37 ” 单 击 【 复 制 当 前 选 定 的 站 点 】 按 钮 5-38 ”复制 站 点 后 的 效果 


5.3.5 ”案例 7 一 一 导出 与 导入 站 点 


如 果 要 在 其 他 计算 机 上 编辑 同一 个 网 站 ， 此 时 可 以 通过 导出 站 点 的 方法 ， 将 站 点 导出 为 
ste 格式 的 文件 ， 然 后 导入 到 其 他 计算 机 上 即 可 。 具 体操 作 步 又 如 下 。 
EC 在 【管理 站 点 】 对 话 框 中 ， 选 中 需要 导出 的 站 点 后 ， 单 击 【 导 出 当前 选 定 的 站 
点 】 按 钮 ， 如 图 5-39 所 示 。 


生理 站点 x 



































EE CC 委 











图 5-39 单 击 【 导 出 当前 选 定 的 站 点 】 按 钮 


本 TT 打开 【导出 站 点 】 对 话 框 ， 在 【文件 名 】 下 拉 列 表 框 中 输入 导出 文件 的 名 称 ， 
单 击 【保存 】 按 钮 即 可 ， 如 图 5-40 所 示 。 
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5-40 【导出 站 点 】 对 话 框 


沿革 幅 色 90 JeAeewueald 洒 密 一 由 类 深 消 导 己 得 由 9 小 三 
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EECDS9 在 其 他 计算 机 上 打开 【管理 站 点 】 对 话 框 ， 单 击 【导入 站 点 】 按 钮 ， 如 图 5-41 
所 示 。 
























































图 5-41 单 击 【 导 入 站 点 】 按 钮 


EEC 打开 【导入 站 点 】 对 话 框 ， 选 中 需要 导入 的 文件 ， 单 击 【 打 开 】 按 钮 ， 如 图 5-42 
所 示 。 
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峡 Windows10 (F: 
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图 5-42 【导入 站 点 】 对 话 框 
EEJD 返回 到 【管理 站 点 】 对 话 框 ， 即 可 看 到 新 导入 的 站 点 ， 如 图 5-43 所 示 。 


管理 法 点 


















































5-43 ”新 导入 的 站 点 


5.4 ”操作 站 点 文件 及 文件 夹 


无 论 是 创建 空白 文档 ， 还 是 利用 已 有 的 文档 创建 站 点 ， 都 需要 对 站 点 中 的 文件 或 文件 夹 
进行 操作 。 在 【本 地 文件 】 窗 口中 ， 可 以 对 本 地 站 点 中 的 文件 夹 和 文件 进行 创建 、 删 除 、 移 
动 、 复 制 等 操作 。 


5.4.1 案例 8 一 一 创建 文件 夹 


在 本 地 站 点 中 创建 文件 夹 的 具体 操作 步骤 如 下 。 

EEC 在 Dreamweaver CC 工作 界面 的 右 侧 选择 【文件 】 选 项 卡 ， 然 后 选中 【本 地 文 
件 】 窗 口中 创建 的 站 点 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 令 ， 如 
图 5-44 所 示 。 

EECRDp 此 时 新 建文 件 夹 的 名 称 处 于 可 编辑 状态 ， 可 以 对 其 进行 重 命名 ， 如 这 里 将 其 重 
命名 为 image， 如 图 5-45 所 示 。 


泣 叶 泪 僵 99 JeAeewueald 末 育 一 一 上 类 竞 消 记 妆 调 “ 才 9S 小 鲁 


站 点 (S) ”窗口 (W) 帮助 (H) | 





可 到 (G) 局 向 9 ~ | 本 地 视图 ~ | 
中 GT139QYS 加 | 品 


显示 取出 者 (8)…- 
复原 页 (R) 

与 远程 服务 块 比较 (W) 
站 点 特定 的 代码 提示 (S).… 











图 5-44 选择 【新 建文 件 夹 】 命 令 图 5-45 ”新建 文件 夹 并 重 命名 


5.4.2 案例 9 一 一 创建 文件 修改 (M) 相 式 O) 命 S(O TE i - 


文件 夹 创建 好 后 ， 就 可 以 在 文件 夹 中 创建 相应 
的 文件 了 。 具 体操 作 步 又 如 下 。 

EI 选择 【文件 】 选 项 卡 ， 然 后 在 准备 新 
建文 件 的 位 置 右 击 ， 从 弹出 的 快捷 菜单 中 
选择 【新 建文 件 】 命 令 ， 如 图 5-46 所 示 。 

GETE> 此 时 新 建文 件 的 名 称 处 于 可 编辑 状 
态 ， 如 图 5-47 所 示 。 5-46 ”选择 【新 建文 件 】 命 令 

ED 将 新 建 的 文件 重 命名 为 index html， 然 
后 按 Enter 键 完成 输入 ， 即 可 完成 文件 的 新 建 和 重 命名 操作 ， 如 图 5-48 所 示 。 
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5-47 ”新 建文 件 5-48 ” 重 命名 为 index. html 


5.4.3 ”案例 10 一 一 文件 或 文件 夹 的 移动 和 复制 


站 点 下 的 文件 或 文件 夹 可 以 进行 移动 与 复制 操作 ， 有 具体 操作 步骤 如 下 。 

ECERD 选择 【窗口 】 一 【文件 】 命 令 ， 打 开 【 文 件 】 面 板 ， 选 中 要 移动 的 文件 或 文件 
夹 ， 然 后 拖 动 到 相应 的 文件 夹 即 可 ， 如 图 5-49 所 示 。 

EEDD9 也 可 以 利用 剪 切 和 粘贴 的 方法 来 移动 文件 或 文件 夹 。 在 【文件 】 面 板 中 ， 选 中 
要 移动 或 复制 的 文件 或 文件 夹 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【 剪 
切 】 或 【拷贝 】 命 令 ， 如 图 5-50 所 示 。 


可 
EC 5 | 加 


‘ 
赔 1 个 世 地 项 目 被 迁 中 . 总 共 3 [月 志 .-.] 
= 





图 5-49 移动 文件 图 5-50 移动 或 复制 文件 


加 下 。 进行 移动 可 以 选择 【 剪 切 】 命 令 进行 复制 可 以 选择 【 找 贝 】 命令 。 
\ 


ETE> 选中 目标 文件 夹 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【粘贴 】 命 令 ， 
这 样 文件 或 文件 夹 就 会 被 移动 或 复制 到 相应 的 文件 夹 中 了 。 


5.4.4 ”案例 11 一 一 删除 文件 或 文件 夹 


对 于 站 点 下 的 文件 或 文件 夹 ， 如 果 不 再 需要 ， 就 可 以 将 其 删除 。 具 体操 作 步 骤 如 下 。 
EEIDy 在 【文件 】 面 板 中 ， 选 中 要 删除 的 文件 或 文件 夹 ， 然 后 在 文件 或 文件 夹 上 右 


击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【删除 】 命 令 ， 或 者 按 Delete 键 ， 如 图 5-51 
所 示 。 

ECESRP9 弹出 提示 对 话 框 ， 询 问 是 否 要 删除 所 选 文件 或 文件 夹 ， 单 击 【 是 】 按 钮 ， 即 可 
将 文件 或 文件 夹 从 本 地 站 点 中 删除 ， 如 图 5-52 所 示 。 
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图 5-51 删除 文件 图 5-52 ”信息 提示 框 


Sn 和 站 点 的 删除 操作 不 同 ， 对 文件 或 文件 夹 的 删除 操作 会 从 磁盘 上 真正 地 删除 相应 


SS 的 文件 或 文件 天 。 


5.5 ”综合 案例 一 一 创建 本 地 站 点 


通过 本 章 的 学 习 ， 读 者 就 能 够 在 实际 应 用 中 创建 本 地 站 点 了 。 创 建 本 地 站 点 的 具体 操作 步 
又 如 下 。 
EC 选择 【站 点 】 一 【新 建站 点 】 命 令 ， 即 可 打开 【站 点 设置 对 象 千 谷 网 络 】 对 话 
框 ， 然 后 在 【站 点 名 称 】 文 本 框 中 输入 “ 千 谷 网 络 ”， 如 图 5-53 所 示 。 
EGRD) 单 击 【 本 地 站 点 文件 夹 】 文 本 框 右 侧 的 【浏览 文件 夹 】 按 钮 国 ， 即 可 打开 【 选 
择 根 文件 夹 】 对 话 框 ， 在 该 对 话 框 中 选择 放置 站 点 “ 千 谷 网 络 ” 的 文件 夹 ， 如 图 5-54 
所 示 。 






































图 5-53 【站 点 设置 对 象 千 谷 网 络 】 对 话 框 图 5-54 选择 站 点 存放 的 文件 夹 
EECSRUS 单 击 【选择 文件 夹 】 按 钮 ， 返 回 到 【站 点 设置 对 象 千 谷 网 络 】 对 话 框 ， 此 时 可 


水 呈 和 幅 僵 99 J98Ae98MWealg 洒 疹 一 一 上 炎 婉 淅 习 妆 刘 才 9 滤 鱼 
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以 看 到 【本 地 站 点 文件 夹 】 文 本 框 中 已 经 显示 为 “D:\ 千 谷 网 络 '”， 如 图 5-55 所 示 。 
EEC 单 击 【保存 】 按 钮 ， 返 回 到 Dreamweaver CC 工作 界面 ， 然 后 选择 【站 点 】 一 
【管理 站 点 】 命 令 ， 从 打开 的 【管理 站 点 】 对 话 框 中 可 以 查看 新 建 的 站 点 ， 如 图 5-56 









































所 示 。 

at Drsammwsayver 区 点 至 网 站 中 使 用 的 所 有 文件 和 芝 天 人 攻 语 - | 
本 于 汪汪 

和 伍 梧 以 在 二 处 为 creamweaver 外 点 访 下 太太 嵌 夫 和 名 称 * 

ss 
CT | 
区 到 
Cm Ce wm] | CE 
图 5-55 应 用 选择 的 文件 夹 图 5-56 查看 新 建 的 站 点 
5.6 疑难 解 惑 


疑问 1: 在 【资源 】〗 面 板 中 ， 为 什么 有 的 资源 在 预览 区 中 无 法 正常 显示 (如 Flash 动画 )? 


答 : 之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 不 同类 型 的 资源 有 不 同 的 预览 显示 方式 。 比 如 
Flash 动画 ， 被 选中 的 Flash 在 预览 区 中 显示 为 占 位 符 ， 要 观看 其 播放 效果 ， 必 须 单 击 预览 区 
中 的 播放 按钮 。 


疑问 2: 在 Adobe Dreamweaver CC 的 【属性 】 面 板 中 为 什么 只 显示 了 其 标题 栏 ? 


答 : 之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 属性 检查 器 被 折 辣 起 来 了 。Adobe Dreamweaver 
CC 为 了 节省 屏幕 空间 ， 为 各 个 面板 组 都 设计 了 折 车 功能 ， 单 击 该 面板 组 的 标题 名 称 ， 即 可 在 
展开 / 折 全 状态 之 间 进 行 切换 。 同 时 ， 对 于 不 用 的 面板 组 还 可 以 将 其 暂时 关闭 ， 需 要 使 用 时 再 
通过 【窗口 】 菜 单 将 其 打开 。 


第 6 齐 
制作 我 的 第 一 个 
网 页 一 使 用 文本 
丰富 网 页 内 容 


在 浏览 网 页 时 ， 通 过 文本 获取 信息 是 最 直接 的 方式 。 文本 是 基本 的 信息 载体 ， 
不 管 网 页 内 容 如 何 丰 富 ， 文 本 自始至终 都 是 网 页 中 最 基本 的 元 素 。 本 章 主 要 介绍 如 
何 使 用 文本 丰富 网 页 内 容 。 
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6.1 网 页 文档 的 基本 操作 


使 用 Dreamweaver CC 可 对 网 站 的 网 页 进行 编辑 。 该 软件 为 创建 Web 文档 提供 了 灵活 的 
编辑 环境 。 


6.1.1 案例 1 一 一 创建 网 页 
制作 网 页 的 第 一 步 就 是 创建 空白 网 页 文档 ， 使 用 Dreamweaver CC 创建 空白 网 页 文档 的 具 
体操 作 步 又 如 下 。 


EC 选择 【文件 】 一 【新 建 】 命 令 。 打 开 【 新 建文 档 】 对 话 框 ， 并 选择 其 左 侧 的 
【空白 页 】 选 项 ， 在 【页 面 类 型 】 列 表 框 中 选择 HTML 选项 ， 在 【布局 】 列 表 框 中 
选择 【< 无 >】 选 项 ， 如 图 6-1 所 示 。 

EC 单 击 【创建 】 按 钮 ， 即 可 创建 一 个 空白 文档 ， 如 图 6-2 所 示 。 
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图 6-1 【新 建文 档 】 对 话 框 

















图 6-2 创建 空白 文档 
6.1.2 案例 2 一 一 页 面 属性 


创建 空白 文档 后 ， 接 下 来 需要 对 文件 的 页 面 属性 进行 设置 ， 也 就 是 设置 整个 网 站 页 面 的 
外 观 效果 。 选 择 【 修 改 】 一 【页 面 属性 】 命 令 ， 如 图 6-3 所 示 。 或 者 按 Ctrl+J 组 合 键 ， 打 开 
【页 面 属性 】 对 话 框 ， 从 中 可 以 设置 外 观 、 链 接 、 标 题 、 标 题 /编码 和 跟踪 图 像 等 属性 。 下 面 
分 别 介绍 如 何 设置 页 面 的 外 观 、 链 接 、 标 题 等 属性 。 


1. 设置 外 观 


在 【页 面 属 性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【外 观 】 选 项 ， 可 以 设置 CSS 外 观 和 
HTML 外 观 。 外 观 的 设置 可 以 从 页 面 字体 、 文 字 大 小 、 文 本 颜色 等 方面 进行 ， 如 图 6-4 
所 示 。 

例如 ， 想 要 设置 文本 的 字体 样式 ， 可 以 在 【页 面 字体 】 下 拉 列 表 框 中 选择 一 种 字体 样 
式 ， 然 后 单 击 【 应 用 】 按 钮 ， 页 面 中 的 字体 即 可 显示 为 这 种 字体 样式 ， 如 图 6-5 所 示 。 








































































































































































































Bw to) se(O as) gn EE x 
模板 层 性 (P)-- We 
页 面 字体 (站 ): | 国 Coxsoles, Mndale ~ | | 
SN | 大 he): 基 于 加 
快运 标 笠 六 各 器 (QJ- CtT x#et): mm |] 
剖 蛙 客 禄 D Car+L 合生 曾 名 (3): 有 | wo00305 | 
移 除 锋 接 (R) Ctrl+Shift+L 东 导 图 银 (): [Fle 7775 /Isers/ egyDocments/| [天 克 W | 
打开 鳞 接 页 面 (O)-- 重复 (7); [s v 
表格 (nD > 友 了 60: 上 ] 辣 梧 有 wn): lz | 
pa 了 Lb i | Tiwi: | 
排列 有 部 (A) >» 
库 (D) > Eee SS 和 
ce 7 CT | TR | 
图 6-3 选择 【页 面 属性 】 命 令 图 6-4 【页 面 属性 】 对 话 框 
| 页面 层 性 x 
分 天 外 现 SS) 
页 面 字体 (); | 国 Consolss, tnéale ~ 加 加 
KS) S| 
0): I] 
WE): I | 
背景 医 像 (I) TO 
时) v 
左 i0: ”| ow 0): | 
ib 0): J To): |__| 
生活 是 一 首 歌 ， 一 首 五 内 统 动 的 歌 ， 一 首 低沉 而 又 高 史 的 歌 ， 一 首 令 人 无 法 提 
[9 吧 ] [=m 入 的 歌 。 生 活 中 的 观 难 围 苦 就 是 过 一 个 个 味 动 的 音符 ， 由 于 这 些 音符 的 加 入 才 
使 生活 变 得 更 加 美妙 。 
图 6-5 设置 页 面 字体 
2. 设置 链接 
在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【链接 】 选 项 ， 即 可 设置 链接 的 属性 ， 
如 图 6-6 所 示 。 
3. 设置 标题 
在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 】 选 项 ， 即 可 设置 标题 的 属性 ， 
如 图 6-7 所 示 。 
| 页 本 大 性 x TE x 
负 扩 (Cs) 坊 
六 人 0) 天 TREE) [ 本 ES 
es 夏 6): 王 “~ 辆 | M3 加 加 | ] 
a 姑 拉 着 0 国 太吉 村 安国 太一 图 加 ] 
已 访 认 人 ): 国 一] 寺 堪 坟 0): 国 [|] 加 司 | ] 
Tn [RE 图 辐 | ] 
加 加 
lz| 
EE 了 “| | 十 加 | [=m > | 
图 6-6 设置 页 面 的 链接 图 6-7 设置 页 面 的 标题 
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4. 设置 标题 /编码 


在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 /编码 】 选 项 ， 即 可 设置 标题 /编码 
的 属性 ， 比 如 网 页 的 标题 、 文 档 类 型 和 网 页 中 文本 的 编码 ， 如 图 6-8 所 示 。 
5. 设置 跟踪 图 像 


在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【跟踪 图 像 】 选 项 ， 即 可 设置 跟踪 图 像 
的 属性 ， 如 图 6-9 所 示 。 


























性 x 
慰 是 /编码 x 
村 是 (r); 鞠 本 机 se 
wha mm | a ]F 
pe | ey 通明 度 (1) L000 
MMR) nicole (mm 人 | 重新 载 入 (BR) 到 TT 
tnitods 标准 化 表单 0)，[ 天 有 骨 ， 且 克 所 ) 局 
口 电 括 wieode 答 名 (BID (5) 
文件 文件 
站 上 文件 夫 : 5: VsersWi mga\Dhcunents' 未 命名 站 点 2\ 
区 必要 | -天 册 区 .| CE | [EW | 














图 6-8 设置 标题 /编码 
1) ”设置 跟踪 图 像 
【跟踪 图 像 】 选 项 用 于 设置 作为 网 页 跟踪 图 像 的 文件 路 径 。 通 过 单 击 【 跟 踪 图 像 】 文 本 
框 右 侧 的 浏览 按钮 ER]， 可 以 在 弹出 的 对 话 框 中 选择 图 像 作 为 跟踪 图 像 ， 如 图 6-10 所 示 。 
跟踪 图 像 是 Dreamweaver 中 非常 有 用 的 功能 。 使 用 这 个 功能 时 ， 需 要 先 用 平面 设计 工具 
设计 出 页 面 的 平面 版 式 ， 再 以 跟踪 图 像 的 方式 将 其 导入 到 页 面 中 ， 这 样 用 户 在 编辑 网 页 时 就 


6-9 设置 跟踪 图 像 























可 以 精确 地 定位 页 面 元 素 。 
2) ”设置 透明 度 
拖 动 滑 块 ， 可 以 调整 图 像 的 透明 度 ， 透 明度 越 高 ， 图 像 越 清晰 ， 如 图 6-11 所 示 。 
2 js es 
| 忌 esf (C): [BLe: EMaesyaimeyacemeat [NOD | 
L Fe] hE a 
| 0 | 三 闹 取消 “| | 应 同 四) | | mh CE | Wk || BAW | 
图 6-10 添加 图 像 文 件 图 6-11 设置 图 像 的 透明 度 
让 使 用 了 跟踪 图 像 后 ， 原 来 的 背景 图 像 则 不 会 显示 。 但 是 在 下 浏览 器 中 预览 时 ， 则 
意 


会 显示 出 页 面 的 真实 效果 ， 而 不 会 显示 跟踪 图 像 的 效果 。 


6.1.3 ”案例 3 一 一 保存 网 页 


在 网 页 制作 完成 后 ， 用 户 通常 要 进行 的 操作 就 是 保存 网 页 。 有 具体 操作 步骤 如 下 。 

EEC 在 Dreamweaver CC 工作 界面 中 选择 【文件 】 一 【保存 】 命 令 ， 如 图 6-12 所 示 。 

EC 打开 【另存 为 】 对 话 框 ， 设 置 文件 的 保存 路 径 和 文件 名 称 后 ， 单 击 【保存 】 按 
钮 即 可 ， 如 图 6-13 所 示 。 


Dw [Em 和 ie (VW 和 () $x(M) Ea 





ET ~ 
BT A Documerts (hom hm” hom shontahntveine'vagir 扫 "oonr appcache ~ 
国 











保存 所 有 栓 关 文 首 (R) 


图 6-12 选择 【保存 】 命 令 








图 6-13 【另存 为 】 对 话 框 


Br 为 了 提高 保存 网 页 的 效率 ， 用 户 可 以 直接 按 CtrltS 组 合 键 来 保存 网 页 文件 ， 另 


外 ， 用 户 可 以 选择 【文件 】 一 【另存 为 〗 命 令 ， 也 可 以 打开 【另存 为 】 对 话 框 。 


6.1.4 ”案例 4 一 一 打开 网 页 


网 页 文件 保存 完成 后 ， 如 果 还 需要 编辑 ， 则 需要 将 其 打开 。 常 见 的 打开 方法 如 下 。 
1. 通过 欢迎 界面 打开 网 页 


在 启动 Dreamweaver CC 程序 后 ， 在 打开 的 欢迎 界面 中 单 击 【 打 开 】 按 钮 ， 即 可 在 指定 的 
位 置 打开 网 页 文件 ， 如 图 6-14 所 示 。 


2. 通过 【文件 】 菜 单打 开 网 页 


在 Dreamweaver CC 工作 界面 中 选择 【文件 】 一 【打开 】 命 令 ， 如 图 6-15 所 示 。 即 可 打 
开 【 打 开 】 对 话 框 ， 然 后 设置 打开 文件 即 可 。 


3. 通过 最 近 访 问 的 文件 打开 网 页 

在 Dreamweaver CC 工作 界面 中 选择 【文件 】 一 【打开 最 近 的 文件 】 命 令 ， 在 弹出 的 子 菜 
单 中 选择 需要 打开 的 文件 即 可 ， 如 图 6-16 所 示 。 

4. 通过 打开 方式 打开 网 页 


在 需要 打开 的 网 页 文件 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【打开 方式 】 一 Adobe 
Dreamweaver CC 命令 ， 即 可 打开 选择 的 网 页 文件 ， 如 图 6-17 所 示 。 
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[ET WE CulrN 
[ET 2 Ga 
[rsa 本 
园 jesme=ss 关 (C Cw 
es 全 部 关 河 (E) Cl+shifrW 
保存 (S) Ctrl+S 
号 为 J-- Celshfs 
分 
全 所 有 相关 文件 (N 
6-14 ”欢迎 界面 6-15 ”选择 【打开 】 命 令 
re 
Dw [RH] a(t sav A) AM) EO) $C Wal5) gC 六 a MD 0 
| cleN 2 
"| FH(O).. CerlrO ee 
基 a(O ColrW 
0E) Curlshit+W a 
Rm) Curlts 国 zr dm 
为 (A Ctrl+Shift+s 司 ER 00 有 
6) Ee 
全 从 所 有 相关 文件 (R) Ee 
6-16 ”通过 最 近 访问 的 文件 打开 网 页 图 6-17 通过 打开 方式 打开 网 页 


Se 用 户 选 择 网 页 文件 后 ， 按 住 鼠 标 左 键 不 放 ， 直 接 拖 旧 到 Dreamweaver CC 软件 工 
慌 。 作 界面 上 ， 也 可 以 快速 打开 该 网 页 文件 。 


6.1.5 “案例 5 一 一 预览 网 页 


在 设计 网 页 的 过 程 中 ， 如 果 想 查看 网 页 的 显示 效果 ， 可 以 通过 预览 功能 查看 该 网 页 。 具 
体操 作 步 又 如 下 。 
EEC 选择 【文件 】 一 【在 浏览 器 中 预览 】 命 令 ， 在 弹出 的 子 菜单 中 选择 查看 网 页 的 
浏览 器 ， 这 里 选择 IEXPLORE 命令 ， 如 图 6-18 所 示 。 
四 23 浏览 器 会 自动 启动 ， 并 显示 网 页 的 最 终 显 示 效 果 ， 如 图 6-19 所 示 。 


= 
Dw EH] sa =sw eX wom ao zetl Way ecm se SS Ter Gem 
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TE | 








6-18 选择 IEXPLORE 命令 6-19 ”预览 网 页 效果 


6.2 ”使 用 文字 添加 网 页 内 容 


所 谓 设置 文本 属性 ， 主 要 是 对 网 页 中 的 文本 格式 进行 编辑 和 设置 ， 包 括 文本 字体 、 文 本 
颜色 、 字 体 样式 等 。 


6.2.1 案例 6 一 一 插入 文字 


文字 是 基本 的 信息 载体 ， 是 网 页 中 最 基本 的 元 素 之 一 。 在 网 页 中 运用 丰富 的 字体 、 多 样 
的 格式 及 赏心悦目 的 文字 效果 ， 是 网 站 设计 师 必 不 可 少 的 技能 。 

在 网 页 中 插入 文字 的 具体 操作 步骤 如 下 。 

ECG 选择 【文件 】 一 【打开 】 命令 ， 弹 出 【打开 】 对 话 框 ， 选 择 要 打开 的 文件 ， 这 
里 打开 “ch06\ 插 入 文字 .html”， 然 后 单 击 【 打 开 】 按 钮 ， 如 图 6-20 所 示 。 
EEJRU2 将 光标 放置 在 文档 的 编辑 区 ， 如 图 6-21 所 示 。 
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图 6-20 【打开 】 对 话 框 图 6-21 打开 的 素材 文件 


本 TB 输入 文字 ， 如 图 6-22 所 示 。 
EC 选择 【文件 】 一 【另存 为 】 命 令 ， 将 文件 保存 为 “ch06\ 插 入 文字 后 .html”， 按 
F12 键 在 浏览 器 中 预览 ， 效 果 如 图 6-23 所 示 。 





























图 6-22 输入 文字 图 6-23 ”预览 网 页 效果 
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6.2.2 ”案例 7 一 一 设置 字体 


插入 网 页 文字 后 ， 用 户 可 以 根据 自己 的 需要 对 插入 的 文字 进行 设置 ， 包 括 字 体 样 式 、 字 
体 大 小 、 字 体 颜 色 等 。 
对 网 页 中 的 文本 进行 字体 设置 的 具体 操作 步骤 如 下 。 
EDp 打开 “ch06\ 插 入 文字 后 .html” 文 件 。 在 文档 窗口 中 ， 选 中 要 设置 字体 的 文本 ， 
如 图 6-24 所 示 。 
EEJD2y 在 下 方 的 【属性 】 面 板 中 ， 在 【字体 】 下 拉 列 表 框 中 选择 字体 ， 如 图 6-25 所 示 。 
























图 6-24 选中 文本 图 6-25 选择 字体 
芍 于 BY 选中 的 文本 即 可 变 为 所 选 字体 。 
6.2.3 ”案例 8 一 一 设置 字号 


字号 是 指 字体 的 大 小 。 在 Dreamweaver CC 中 设置 文字 字号 的 具体 操作 步骤 如 下 。 
EDp 打开 “ch06\ 插 入 文字 后 .html” 文 件 ， 选 定 要 设置 字号 的 文本 ， 如 图 6-26 所 示 。 


xr i 





图 6-26 ”选择 需要 设置 字号 的 文本 
EEJpp 在 【属性 】 面 板 的 【大 小 】 下 拉 列 表 框 中 选择 字号 ， 这 里 选择 18， 如 图 6-27 












































所 示 。 
尾 性 
《pm 目标 规则 | + 内 联 样式 > ~| | 字体 6) | 号 A 闻 本 ~| ~T EE 和 EE 
[Becss] 编辑 枫 则 。 “Css 面板 人 p) 大 小 (S) |18 vjJle ~| 辐 ] 
周 单元 洛 水平 亿 ) 匡 认 ”~ 宽 全 不 入 行 0) 口 有 (TJ | 页 二 性- | 
一 总 论 十 中” ~ 高 WW 标量 名 口 

















6-27 【属性 】 面 板 


EESS 选中 的 文本 字体 大 小 将 更 改 为 18， 如 图 6-28 所 示 。 
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图 6-28 设置 字号 后 的 文本 显示 效果 


Se 如 果 要 设置 字符 相对 默认 字符 大 小 的 增 减 量 ， 可 以 在 同一 个 下 拉 列 表 框 中 选择 
半 xx-small、xx-large 或 smaller 等 选项 。 如 果 要 取消 对 字号 的 设置 ， 选 择 【无 〗 选 项 


郑 可 。 


6.2.4 案例 9 一 一 设置 字体 颜色 


多 彩 的 字体 颜色 可 以 增强 网 页 的 表现 力 。 在 Dreamweaver CC 中 ， 设 置 字 体 颜色 的 具体 操 
作 步 又 如 下 。 
EEC 打开 “ch06\ 设 置 文本 属性 .html” 文 件 ， 选 中 要 设置 字体 颜色 的 文本 ， 如 图 6-29 
所 示 。 
EEIpy 在 【属性 】 面 板 上 单 击 【 文 本 颜色 】 按钮 图 ， 打 开 Dreamweaver CC 颜色 板 ， 从 
中 选择 需要 的 颜色 ， 也 可 以 直接 在 该 按钮 右边 的 文本 框 中 输入 颜色 的 十 六 进 制 数 
值 ， 如 图 6-30 所 示 。 


xdhrl a 
CE 









































图 6-29 选中 文本 图 6-30 设置 文本 颜色 
本 于 BY 选 定 颜色 后 ， 被 选中 的 文本 将 更 改 为 选 定 的 颜色 ， 如 图 6-31 所 示 。 
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6-31 设置 的 文本 颜色 


6.2.5 ”案例 10 一 一 设置 字体 样式 


字体 样式 是 指 字体 的 外 观 显示 样式 ， 如 字体 的 加 粗 、 倾 斜 、 加 下 划 线 等 。 利 用 
Dreamweaver CC 可 以 设置 多 种 字体 样式 。 具 体操 作 步 又 如 下 。 
ED 选 定 要 设置 字体 样式 的 文本 ， 如 图 6-32 所 示 。 
EDp 选择 【格式 】 一 【HTML 样式 】 命 令 ， 弹 出 子 菜单 ， 如 图 6-33 所 示 。 
We $+:0 ro sow mm 


mn 


HIML EE 


Untited-3” Xx 
C55 hizo) 


ed 
| 人 | 拆 分 [这 | 开拓 图 鸣 . 区 用 b FE4 区 


铀 禾 日 当 午 
汗 滴 不 下 士 | 








图 6-32 选中 文本 图 6-33 设置 文本 样式 


子 菜单 中 各 命令 含义 如 下 。 

。 粗 体 : 从 子 菜单 中 选择 【 粗 体 】 命 令 ， 可 将 选中 的 文字 加 粗 显示 ， 如 图 6-34 所 示 。 

e@ 斜体 : 从 子 菜单 中 选择 【和 斜体】 命令 ， 可 将 选中 的 文字 显示 为 斜体 样式 ， 如 图 6-35 
所 示 。 


铀 禾 日 当 午 铀 禾 日 当 午 
汗 滴 禾 下 土 | 江 注 天 下士 


图 6-34 设置 文字 为 粗 体 图 6-35 设置 文字 为 斜体 


@ 。 下划线: 从 子 菜单 中 选择 【下 划 线 】 命 令 ， 可 在 选中 的 文字 下 方 显示 一 条 下 划 线 ， 


如 图 6-36 所 示 。 
Se 利用 【属性 】 面 板 也 可 以 设置 字体 的 样式 。 选 中 文本 后 ， 单 击 【 属 性 】 面 板 上 的 


并。 国 按 钮 可 加 粗 字体 ， 单 击 区 按钮 可 使 文本 变 为 铬 体 样式 ， 如 图 6-37 所 示 。 


负 禾 日 当 午 

















[<y ma | 格式 人 ) 段 著 ~ 类 [content -| BI 丘 汪 起 可 村 是 0) 
本 cs mt 鞠 四 区 -BD 。 和 (0) 
图 6-36 ”给 文字 添加 下 划 线 6-37 【属性 】 面板 
mn 按 Ctrl+B 组 合 键 ， 可 以 使 选中 的 文本 加 粗 ; 按 CtrlHI 组 合 键 ， 可 以 使 选中 的 文本 


也 提示 
倾 儿 。 


e 删除 线 : 从 子 菜单 中 选择 【删除 线 】 命 令 ， 就 会 在 选中 的 文字 的 中 部 出 现 一 条 横贯 


的 横 线 ， 表 明文 字 已 被 删除 ， 如 图 6-38 所 示 。 


®@ ”打字 型 :从 子 菜单 中 选择 【打字 型 】 命 令 ， 就 可 以 将 选中 的 文本 作为 等 宽度 文本 来 


显示 ， 如 图 6-39 所 示 。 


铀 条 日 当 午 铠 禾 日 当 午 
评 濠 天 丰 寺 闻 沙 和 天 下 十 


图 6-38 添加 文字 删除 线 图 6-39 设置 字体 的 打字 效果 


[| 
所 谓 等 宽度 文本 ， 是 指 每 个 字符 或 字母 的 宽度 相同 。 


®。 强调: 从 子 菜单 中 选择 【强调 】 命 令 ， 则 表明 选中 的 文字 需要 在 文件 中 被 强调 ， 大 


多 数 浏览 器 会 把 它 显示 为 斜体 样式 ， 如 图 6-40 所 示 。 


e@。 加强: 从 子 菜单 中 选择 【加 强 】 命 令 ， 则 表明 选 定 的 文字 需要 在 文件 中 以 加 强 的 格 


式 显 示 ， 大 多 数 浏览 器 会 把 它 显示 为 粗 体 样式 ， 如 图 6-41 所 示 。 


钢 不 日 当 午 钢 不 日 当 午 
订 注 天 仆 圭 汗 滴 和 下 土 


图 6-40 ”添加 文字 强调 效果 图 6-41 加 强 文字 效果 
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汀 加 让 | 匆 吕 浊 市 并 岂 9 小 国 
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6.2.6 ”案例 11 一 一 编辑 段落 


段落 指 的 是 一 段 格式 上 统一 的 文本 。 在 文件 窗口 中 每 输入 一 段 文 字 ， 按 Enter 键 后 ， 就 会 
生成 一 个 段落 。 编 辑 段落 主要 是 对 网 页 中 的 一 段 文 本 进行 设置 。 


1. 设置 段落 格式 


使 用 【 属性】 面板 中 的 【格式 】 下 拉 列 表 框 ， 或 选择 【格式 】 一 【段落 格式 】 命 令 ， 都 
可 以 设置 段落 格式 。 具 体操 作 步 又 如 下 。 


ECSRDD 将 光标 放置 在 段落 中 任意 一 个 位 置 ， 或 选中 段落 中 的 一 些 文本 ， 如 图 6-42 所 示 。 
ECRUPD 选择 【格式 】 一 【段落 格式 】 子 菜单 中 的 命令 ， 如 图 6-43 所 示 。 


画 vneucd> 











说 明 ， 商品 贸易 交易 平台 主要 是 礼品 贸易 


EN $$(0 us() OW wm(H) 

本 编 送 们 ) Cerl+Alt+] | 司 
案例 名 称 ， 贸 易 交易 平台 联营 模 + 
开发 语言 ，Java pg 














| 
led 昌国 天 sa : arv | 
图 6-42 选中 段落 图 6-43 选择 段落 格式 
Se 在 【属性 】 面 板 的 【格式 】 下 拉 列 表 框 中 选择 任意 一 个 选项 ， 如 图 6-44 所 示 
DS 

















BI 丘 生 可 可 标题 (1) 
馆 接 () “BD 目标 (9) 
列表 让 














图 6-44 在 【属性 】 面 板 中 设置 段落 格式 


国 于 BY 选择 一 个 段落 格式 (比如 【标题 1】)， 然 后 单 击 【 拆 分 】 按 钮 ， 在 代码 视图 下 可 


以 看 到 与 所 选 格式 关联 的 HTML 标记 (比如 表示 【标题 1】 的 hi， 表示 【预先 格式 
化 的 】 文 本 的 pre 等 ) 将 应 用 于 整个 段落 ， 如 图 6-45 所 示 。 
EGR 在 段落 格式 中 对 段落 应 用 标题 标记 时 ，Dreamweaver 会 自动 地 添加 下 一 行文 本 
作为 标准 段落 ， 如 图 6-46 所 示 。 
Sn 若 要 更 改 已 设置 的 段落 标记 ， 可 以 选择 【编辑 】 一 【首选 参数 】〗 命 令 ， 弹 出 【 首 
站 选项】 对 话 框 ， 然 后 在 【常规 】〗】 分 类 中 的 【编辑 选项 】 区 域 中 ， 取 消 选 中 【标题 后 切 
换 到 普通 段落 〗 复 选 框 即 可 ， 如 图 6-47 所 示 。 
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CE EE EE EFS: 


图 6-45 查看 段落 代码 图 6-46 添加 段落 标记 








2. 定义 预 格式 化 


在 Dreamweaver 中 ， 不 能 连续 地 输入 多 个 空格 。 在 显示 一 些 特殊 格式 的 段落 文本 (如 诗歌 ) 
才 ， 这 一 点 就 会 显得 非常 不 便 ， 如 图 6-48 所 示 。 
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图 6-47 【首选 项 】 对 话 框 图 6-48 输入 空格 后 的 段落 显示 效果 


在 这 种 情况 下 ， 可 以 使 用 预 格式 化 标签 <p> 
和 </p> 解 决 该 问题 。 em er Hn 


poe 趾 上 行人 的 晰 武 | 


cneta charset="utf-8"> 


Se 预 格式 化 指 的 是 预先 对 <p> 和 Sd 
</p> 之 间 的 文字 进行 格式 化 。 这 Ps H/o 
样 ， 浏 览 器 在 显示 其 中 的 内 容 时 ， 
就 会 完全 按照 真正 的 文本 格式 来 显 
示 ， 即 原封 不 动 地 保留 文档 中 的 空 
白 ， 比 如 空格 及 制 表 符 等 ， 如 图 6-49 
所 示 。 图 6-49 ” 预 格式 化 的 文字 
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在 Dreamweaver 中 ， 设 置 预 格式 化 段落 的 具体 操作 步骤 如 下 。 
ECD) 将 光标 放置 在 要 设置 预 格式 化 的 段落 中 ， 如 图 6-50 所 示 。 
EECDD) 按 Ctrl+F3 组 合 键 打开 【属性 】 面 板 ， 在 【格式 】 下 拉 列 表 框 中 选择 【预先 格式 


化 的 】 选 项 ， 如 图 6-51 所 示 。 
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图 6-50 选择 需要 预 格式 化 的 段落 
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并 。 化， 如 图 6-53 所 示 。 
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图 6-52 选中 多 个 段落 
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图 6-51 选择 【预先 格式 化 的 】 选 项 


如 果 要 将 多 个 段落 设置 为 预 格 式 化 ， 则 可 同时 选中 多 个 段落 ， 如 图 6-52 所 示 。 


选择 【格式 〗】 一 【段落 格式 】 一 【已 编排 格式 】 命 令 ， 也 可 以 实现 段落 的 预 格式 


EB ss(o ws(s) gOW) 帮助 H) 








准 进 人 Cerl IAk1] 
EB(O) Ctrl+Alt+[ 
下 ES 
内 ， 
列表 0) > 
HTML 样式 (H) > 
CSS 样式 (CO) > 





6-53 ”选择 【已 编排 格式 】 命 令 


该 操作 会 自动 地 在 相应 段落 的 两 端 添 加 <pre> 和 </pre> 标 记 。 如 果 原 来 段落 的 两 端 
有 <p> 和 </p> 标 记 ， 则 会 分 别 用 <pre> 和 </pre> 标 记 将 其 替换 ， 如 图 6-54 所 示 。 


由 于 预 格式 化 文本 不 能 自动 换行 ， 因 此 除非 绝对 需要 ， 否 则 尽量 不 要 使 用 预 格 式 


EECRS 如 果 要 在 段 首 空 出 两 个 空格 ， 不 能 直接 在 设计 视图 方式 下 输入 空格 ， 必 须 切 换 
到 代码 视图 中 ， 在 段 首 文字 之 前 输入 代码 “&nbsp:”， 如 图 6-55 所 示 。 














器 窗口 ) 在 水 平 位 置 的 对 齐 方式 ， 有 4 种 对 齐 方式 ， 左 对 和 
齐 、 居 中 对 齐 、 右 对 齐 和 两 端 对 齐 。 图 6-56 设置 段落 首 行 编 进 格 式 
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yy I EE 下 二 SEE | 
图 6-54 添加 段落 标记 <pre> 6-55 ”在 代码 视图 中 输入 空格 代码 和 
GE 该 代码 只 表示 一 个 半角 字符 ， 要 空 出 两 个 汉 的 

字 的 位 置 ， 需 要 添加 4 个 代码 。 这 样 ， 在 浏览 器 已 Bavannnncs oes| 去 愉 
中 就 可 以 看 到 段 首 已 经 空 出 两 个 格 了 ， 如 图 6-56 ZH me wa eine IRT mh 网 
所 示 清明 时 节 雨 纷纷 
路上 行人 欲 断 赴 容 SS 





对 齐 段 落 的 具体 操作 步骤 如 下 。 

ED 将 光标 放置 在 要 设置 对 齐 方式 的 段落 中 。 如 果 要 设置 多 个 段落 的 对 齐 方式 ， 则 
选择 多 个 段落 ， 如 图 6-57 所 示 。 

ECESDp 进行 下 列 操作 之 一 。 

(1) 选择 【格式 】 一 【对 齐 】 命 令 ， 然 后 从 子 菜单 中 选择 相应 的 对 齐 方式 ， 如 图 6-58 所 示 。 


3. 设置 段落 的 对 齐 方式 NN 
段落 的 对 齐 方式 指 的 是 段落 相对 于 文件 窗口 (或 浏览 
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6-57 选择 多 个 段落 6-58 选择 段落 的 对 齐 方式 
(2) 单 击 【 属 性 】 面 板 中 相应 的 对 齐 按钮 ， 如 图 6-59 所 示 。 
i 目标 规则 | < 备 内 详 样式 > IE ~ 二 ~| 入 诗 要 如 
如 css | [编程 规 则 Css 面板 P) | 大 小 G) 加 “| > J 
页 而 属性 



































图 6-59 【属性 】 面 板 
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可 供 选择 的 按钮 有 4 个 ， 其 含义 分 别 介绍 如 下 。 
e@”【 左 对 齐 】 按 钮 画 : 单 击 该 按钮 ， 可 以 设置 段落 相对 于 文档 窗口 向 左 对 齐 ， 如 图 6-60 
























所 示 。 

e@ 【居中 对 齐 】 按 钮 对 |， 单 击 该 按钮 ， 可 以 设置 段落 相对 于 文档 窗口 居中 对 齐 ， 如 图 6-61 
所 示 。 

ER ECE 

by 全 | 清明 时 而 寻 给 全 | 清明 时 南 纷纷 

a 路 上 行人 谷 断 现 路 上 行人 黎 电 更 

避 品 全 酒家 何 外 有 作 问 生 家 何 直 有 

区 牧 间 过 二 花 村 收音 六 指 寺村 

ss EE ES CRE EE 

图 6-60 ”段落 向 左 对 齐 图 6-61 段落 居中 对 齐 

e@ 。【 右 对 齐 】 按 钮 荐 |， 单 击 该 按钮 ， 可 以 设置 段落 相对 于 文档 窗口 向 右 对 齐 ， 如 图 6-62 

所 示 。 


e@ 【两 端 对 齐 】 按 钮 图 | 单 击 该 按钮 ， 可 以 设置 段落 相对 于 文档 窗口 向 两 端 对 齐 ， 
如 图 6-63 所 示 。 
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图 6-62 段落 向 右 对 齐 图 6-63 ”段落 向 两 端 对 齐 


4. 设置 段落 缩 进 
在 强调 一 段 文字 或 引用 其 他 来 源 的 文字 时 ， 需 要 对 文字 进行 段落 缩 进 ， 以 表示 和 普通 段 


落 有 区 别 。 缩 进 主要 是 指 内 容 相对 于 文档 窗口 (或 浏览 器 窗口 ) 左 端 产生 的 间距 。 


实现 段落 缩 进 的 具体 操作 步骤 如 下 。 

EC 将 光标 放置 在 要 设置 缩 进 的 段落 中 。 如 果 要 缩 进 多 个 段落 ， 则 选中 多 个 段落 ， 
如 图 6-64 所 示 。 

EC 选择 【格式 】 一 【 缩 进 】 命 令 ， 即 可 将 当前 段落 往 右 缩 进 一 段位 置 ， 如 图 6-65 
所 示 。 


单 击 【 属 性 】 面 板 中 的 【删除 内 缩 区 块 〗】 按 钮 莘 和 【内 缩 区 块 〗】 按 钮 图 ， 即 可 实现 当前 





段落 的 凸 出 和 缩 进 。 凸 出 是 将 当前 段落 向 左 恢复 一 段 缩 进 位 置 。 











DIL ETED 





图 6-64 选中 段落 图 6-65 段落 缩 进 
Dr 按 CtrI+Alt+] 组 合 键 可 以 进行 一 次 右 缩 进 ; 按 Ctrl+Alt+[ 组 合 键 可 以 向 左 恢复 一 段 
SS 缩 进 位 置 。 


藤 娃 喇 习 也 由 讨 半 于 让 一 一 呈 习 全 | 小 否 浊 并 起” 册 9 站 音 


6.2.7 案例 12 一 一 创建 项 目 列表 


列表 就 是 那些 具有 相同 属性 元 素 的 集合 。Dreamweaver CC 中 常用 的 列表 有 无 序列 表 和 有 序 
列表 两 种 。 无 序列 表 使 用 项 目 符号 来 标记 无 序 的 项 目 ， 有 序列 表 使 用 编号 来 记录 项 目的 顺序 。 


1. 无 序列 表 


在 无 序列 表 中 ， 各 个 列表 项 之 间 没 有 顺序 级 别 之 分 ， 通 常 使 用 一 个 项 目 符号 作为 每 个 列 
表 项 的 前 级 。 

设置 无 序列 表 的 具体 操作 步骤 如 下 。 

EC 将 光标 放置 在 需要 设置 无 序列 表 的 文档 中 ， 如 图 6-66 所 示 。 

芽 BY 选择 【格式 】 一 【列表 】 一 【项 目 列表 】 命 令 ， 如 图 6-67 所 示 。 
Em Ee 
北京 
人 
深圳 | 
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2 而 6 x os 


图 6-66 要 设置 无 序列 表 的 文档 图 6-67 选择 【项 目 列表 】 命 令 


光标 所 在 的 位 置 将 出 现 默认 的 项 目 符号 ， 如 图 6-68 所 示 。 
EC 重复 以 上 步 又， 设置 其 他 文本 的 项 目 符号 ， 如 图 6-69 所 示 。 


2. 有 序列 表 


对 于 有 序 编号 ， 可 以 指定 其 编号 类 型 和 起 始 编号 。 其 编号 可 以 采用 阿拉 伯 数 字 、 大 写字 
母 或 罗马 数字 等 。 
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| aayaiy 日 国 国 65%67 
6-68 ”添加 项 目 符号 6-69” 带 有 项 目 符号 的 无 序列 表 
设置 有 序列 表 的 具体 操作 步骤 如 下 。 


EECRDD 将 光标 放置 在 需要 设置 有 序列 表 的 文档 中 ， 如 图 6-70 所 示 。 
EEIPp 选择 【格式 】 一 【列表 】 一 【编号 列表 】 命 令 ， 如 图 6-71 所 示 。 


| 动 unwed 





网 页 设计 了 


动画 设计 
干 面 设计 
广告 设计 | 


Be so uss) HOW Wht 





人 日 加 大 ws vssv 











图 6-70 要 设置 有 序列 表 的 文档 图 6-71 选择 【编号 列表 】 命 令 
光标 所 在 的 位 置 将 出 现 编号 列表 ， 如 图 6-72 所 示 。 
EC 重复 以 上 步 又， 设置 其 他 文本 的 编号 列表 ， 如 图 6-73 所 示 。 


画 unaued 

















加 夯 4 2 区 





悍 男 夯 uavsazssv 


6-73 ”有 序列 表 效 果 


列表 还 可 以 嵌 套 。 赃 套 列 表 是 指 一 个 列表 中 还 包含 有 其 他 列表 的 列表 。 设 置 嵌 套 列表 的 
具体 操作 步骤 如 下 。 


EECDDy 选中 要 嵌 套 的 列表 项 。 如 果 有 多 行文 本 需要 嵌 套 ， 则 需要 选中 多 行文 本 ， 如 图 6-74 





6-72 ”设置 有 序列 表 


所 示 。 
区 BY 单 击 【属性 】 面 板 中 的 【 缩 进 】 按 钮 多， 如 图 6-75 所 示 。 或 者 选择 【格式 】 一 
【 缩 进 】 命 令 。 








设计 | 
1 商品 广告 设计 
之 公益 广告 设计 





-了 三 生 本 有 有 生 中 
-加 ee [ml -| 
| Cr LE ) 














qe tay qiy Gy sy 而 于 | as : oss 
6-74 ”列表 幅 套 效果 6-75 【属性 】 面 板 


em 在 【属性 】 面 板 中 直接 单 击 莒 | 或 图 按钮 ， 可 以 将 选 定 的 文本 设置 成 项 目 (无 序 ) 列 
半 。 表 或 编号 (有 序 ) 列 表 。 


珊 了 可 淹 到 帅 败 计 准 注 售 一 一 沼 习 让 | 小 否 浊 并 起” 册 9 站 后 


6.3 ”使 用 特殊 文本 添加 网 页 内 容 


除了 使 用 文字 添加 网 页 内 容 外 ， 用 户 还 可 以 在 网 页 中 通过 插入 其 他 元 素来 丰富 网 页 内 
容 ， 如 水 平 线 、 日 期 、 特 殊 字 符 等 。 


6.3.1 案例 13 一 一 插入 换行 符 


在 输入 文本 的 过 程 中 ， 换 行 时 如 果 直 接 按 Enter 键 ， 行 间距 会 比较 大 。 一 般 情况 下 ， 在 网 
页 中 换行 时 按 Shift + Enter 组 合 键 ， 这 样 才 是 正常 的 行距 。 

也 可 以 在 文档 中 添加 换行 符 来 实现 文本 换行 ， 有 如 下 两 种 操作 方法 。 

(1) 选择 【窗口 】 一 【插入 】 命 令 ， 打 开 【 插 入 】 面 板 ， 然 后 单 击 【字符 】 图 标 ， 在 弹 
出 的 列表 中 选择 【换行 符 】 选 项 ， 如 图 6-76 所 示 。 

(2) 选择 【插入 】 一 【字符 】 一 【换行 符 】 命 令 ， 如 图 6-77 所 示 。 


ES] sw ao =etO als OW wy 
























6-76 选择 【换行 符 】 选 项 6-77 ”选择 【换行 符 】 命 令 
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6.3.2 ”案例 14 一 一 插入 水 平 线 


网 页 文档 中 的 水 平 线 主要 用 于 分 隔 文档 内 容 ， 使 文档 结构 清晰 明了 ， 便 于 浏览 。 在 文档 
中 插入 水 平 线 的 具体 操作 步骤 如 下 。 
EEC 在 Dreamweaver CC 的 编辑 窗 格 中 ， 将 光标 置 于 要 插入 水 平 线 的 位 置 ， 选 择 【 插 
入 】 一 【水 平 线 】 命 令 ， 如 图 6-78 所 示 。 
即 可 在 文档 窗口 中 插入 一 条 水 平 线 ， 如 图 6-79 所 示 。 


[x] $M) tt0) $s(O 站 5 
Div(D) | 
HTML5 Video(V) Ctrl+Alt+Shift+V 
画布 
因 @() ， 
五 (D ClrAlttT 
Head(H) 》 
有 本 (5) 

Hyperlink(P) 

电子 部 伯 畦 授 () 
BM(D) s 
IFRAME 








图 6-78 选择 【水 平 线 】 命 令 图 6-79 插入 的 水 平 线 效果 


EEJSp 在 【属性 】 面 板 中 ， 将 【 宽 】 设 置 为 710，【 高 】 设 置 为 S，【 对 齐 】 设 置 为 
【默认 】， 并 选中 【阴影 】 复 选 杠 ， 如 图 6-80 所 示 。 
EEC 保存 页 面 后 按 F12 键 ， 即 可 预览 插入 的 水 平 线 效果 ， 如 图 6-81 所 示 。 


BE EE | 
FH) pl EBV RR IRM MOO 








一 水 平 线 寅 oD 710 [像素 ~ 对 齐 史 点 认 
= |s | 了 阴影 6) 











图 6-80 【属性 】 面 板 图 6-81 预览 网 页 


6.3.3 ”案例 15 一 一 插入 日 期 


向 网 页 中 插入 系统 当前 日 期 的 具体 方法 有 以 下 两 种 。 

(1) 在 文档 窗口 中 ， 将 插入 点 放 到 要 插入 日 期 的 位 置 。 选 择 【 插 入 】 一 【日 期 】 命 令 ， 
如 图 6-82 所 示 。 

(2) 单 击 【插入 】 面 板 的 【和 常用】 选项 卡 中 的 【日 期 】 图 标 图 | ， 如 图 6-83 所 示 。 


八国 ez， 本 Ko， ss(O xs 
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ee 加 电 

水 颖 四 i] 

国 8 其 

mo -yy 

#0 > 驹 -字符 
6-82 选择 【日 期 】 命 令 6-83 ” 单 击 【日 期 】 图 标 


完成 上 述 任意 一 种 操作 后 ， 可 按 以 下 步骤 操作 。 

EEC 弹出 【插入 日 期 】 对 话 框 ， 从 中 分 别 设置 【星期 格式 】、【 日 期 格式 】 和 【时 
间 格 式 】， 并 选中 【储存 时 自动 更 新 】 复 选 框 ， 如 图 6-84 所 示 。 

ECEPp 单 击 【 确 定 】 按 钮 ， 即 可 将 日 期 插入 到 当前 文档 中 ， 如 图 6-85 所 示 。 


蔓 娃 昼 习 了 上 讨 半 洒 证 一 一 喇 习 全 | 波 下 漳 广 悍 册 9 没 章 
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插入 日 期 x 
2017 年 6 月 23 日 
星 基 格 式 ，[ 不 要 星期] 加 [| We | a ME 
Mat /Tr ~ LW | 
[03/0771974 地 助 
3/7/74 
1974-03-07 
7/3/74 Y 
时 间 格式 :不 要 时 间 ] ~ 
储存 时 自动 更 新 
ae 日 同 天 axan6- 
图 6-84 【插入 日 期 】 对 话 框 图 6-85 插入 的 日 期 


6.3.4 ”案例 16 一 一 插入 特殊 字符 


在 Dreamweaver CC 中 ， 有 时 需要 插入 一 些 特殊 字符 ， 如 版 权 符 号 和 注册 商标 符号 等 。 插 
入 特殊 字符 的 具体 操作 步骤 如 下 。 
EEJD 将 光标 放置 在 文档 中 需要 插入 特殊 字符 (这 里 输入 的 是 版 权 符号 ) 的 位 置 ， 如 图 6-86 
所 示 。 

EEIDy 选择 【插入 】 一 【字符 】 一 【版 权 】 命 令 ， 即 可 插入 版 权 符号 ， 如 图 6-87 所 示 。 
如 果 在 【字符 】 的 子 菜单 中 没有 需要 的 字符 ， 则 可 通过 选择 【插入 】 一 【字符 】 
一 【其 他 字符 】 命 令 ， 打 开 【 插 入 其 他 字符 】 对 话 框 ， 如 图 6-88 所 示 。 

本 TB 单 击 需要 插入 的 字符 ， 该 字符 就 会 出 现在 【插入 】 文 本 框 中 ， 如 图 6-89 所 示 。 

EYY 单 击 【确定 】 按 钮 ， 即 可 将 该 字符 插入 到 文档 中 ， 如 图 6-90 所 示 。 
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图 6-90 插入 的 特殊 字符 
6.4 ”综合 案例 一 一 制作 图 文 并 茂 的 网 页 


本 实例 讲述 如 何在 网 页 中 插入 文本 和 图 像 ， 并 对 网 页 中 的 文本 和 图 像 进行 相应 的 排版 ， 
以 形成 图 文 并 茂 的 网 页 。 

具体 操作 步骤 如 下 。 

EEJDp 打开 “ch06\ 制 作 图 文 并 茂 的 网 页 \index.htm” 文 件 ， 如 图 6-91 所 示 。 
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图 6-91 打开 素材 文件 
EECRPp 将 光标 放置 在 要 输入 文本 的 位 置 ， 然 后 输入 文本 ， 如 图 6-92 所 示 。 
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6-92 输入 文本 


国 于 BY 将 光标 放置 在 文本 的 适当 位 置 ， 选 择 【 插 入 】 一 【图 像 】 命 令 ， 弹 出 【选择 图 
像 源 文件 】 对 话 框 ， 从 中 选择 图 像 文 件 ， 如 图 6-93 所 示 。 

EEC 单 击 【确定 】 按 钮 ， 插 入 图 像 ， 如 图 6-94 所 示 。 

ECUD) 选择 【窗口 】 一 【属性 】 命 令 ， 打开 【属性 】 面 板 ， 在 【属性 】 面 板 的 【 替 
换 】 文 本 框 中 输入 “欢迎 您 的 光临 ! ”， 如 图 6-95 所 示 。 
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图 6-93 【选择 图 像 源 文件 】 对 话 框 
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图 6-94 插入 图 像 
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6-95 ”输入 替换 文字 


区 于 BY 选 定 所 输入 的 文字 ， 在 【属性 】 面 板 中 设置 【字体 】 为 【宋体 】，【 大 小 】 为 


12， 并 在 中 文 输入 法 的 全 角 状 态 下 ， 设 置 每 个 段落 的 段 首 空 两 个 汉字 的 空格 ， 如 


图 6-96 所 示 。 
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图 6-96 设置 文字 属性 





EC 保存 文 要 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 6-97 所 示 。 
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图 6-97 预览 效果 


6.5 疑难 解 惑 


疑问 1: 如 何 添加 页 面 标题 ? 
答 : 常见 的 添加 页 面 标题 的 方法 有 以 下 两 种 。 
1. 在 工作 主 界面 添加 标题 


在 Dreamweaver CC 工作 界面 中 ， 在 【标题 】 文 本 框 中 输入 页 面 标题 即 可 ， 这 里 输入 【这 
是 新 添加 的 标题 】， 如 图 6-98 所 示 。 


2. 使 用 代码 添加 页 面 标题 


在 代码 视图 中 ， 使 用 <title> 标 签 可 以 添加 页 面 标题 ， 如 图 6-99 所 示 。 


文件 (月 篇 张 (5) 吾 看 (V) 插 和 (1 咎 改 (M) 必 StO) 合 S(Q。 基点 (S) 












<ldoctype html> 
<html> 
<head> 





“ody taginesre="1.jpg" tracingopecity="40"> 
4-- 插 入 已 期 -- 


<p>&nbspj<1p> 
</body> 
</html> 


CDI:E aE 











图 6-98 添加 页 面 标题 图 6-99 在 代码 视图 中 添加 页 面 标题 


藤 娃 喇 习 也 由 讨 半 于 让 一 一 呈 习 全 | 小 否 浊 并 起 ” 册 9 站 前 
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疑问 2: 如 何 理解 外 观 (CSS) 和 外 观 (HTML) 的 区 别 ? 


答 : 如 果 使 用 外 观 (CSS) 分 类 设置 页 面 属 性 ， 程 序 会 将 设置 的 相关 属性 代码 生成 CSS 样 
式 。 如 果 使 用 外 观 (HTML) 分 类 设置 页 面 属性 ， 程 序 会 自动 将 设置 的 相关 属性 代码 添加 到 页 面 
文件 的 主体 <body> 标 签 中 。 
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第 7 章 
有 图 有 真相 一 
使 用 图 像 与 多 媒体 

网 页 元 素 


在 设计 网 页 的 过 程 中 ， 单 纯 的 文本 无 法 表现 出 更 形象 、 更 具 视 觉 冲 击 力 的 效 
果 。 图 像 和 多 媒体 能 使 网 页 的 内 容 更 加 丰富 多 彩 、 形 象 生动 ， 可 以 为 网 页 增色 很 
多 。 本 章 重 点 学 习 图 像 和 多 媒体 的 使 用 方法 和 技巧 。 
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7.1 常用 图 像 格式 


图 像 文件 的 格式 非常 多 ， 如 GIF、JPEG、PNG、BMP 等 。 虽 然 这 些 格 式 都 能 插入 网 页 之 
中 ， 但 为 适应 网 络 传输 及 浏览 的 要 求 ， 在 网 页 中 最 常 使 用 的 图 像 格式 有 3 种 ， 即 GIF、JPEG 
和 PNG。 


7.1.1 GIF 格式 


网 页 中 最 常用 的 图 像 格式 是 GIF， 它 的 图 像 最 多 可 显示 256 种 颜色 。GIF 格式 的 特点 是 图 
像 文 件 占用 磁盘 空间 小 ， 支 持 透 明 背 景 和 动画 ， 多 数 用 于 图 标 、 按 钮 、 滚 动 条 、 背 景 等 。 

GIF 格式 的 图 像 的 另外 一 个 特点 是 可 以 将 图 像 以 交错 的 形式 下 载 。 所 谓 交 错 的 形式 ， 就 
是 当 图 像 尚未 下 载 完成 时 ， 浏 览 器 显示 的 图 像 会 由 不 清晰 慢 慢 变 清晰 到 下 载 完成 。 图 7-1 所 
示 为 GIF 格式 的 图 像 。 


GIF 透明 背景 





7-1 GIF 格式 的 图 像 
7.1.2 JPEG 格式 


JPEG 格式 是 一 种 图 像 压 缩 格式 ， 支 持 大 约 1670 万 种 颜色 。 它 主要 应 用 于 摄影 图 片 的 存 
储 和 显示 ， 尤 其 是 色彩 丰富 的 大 自然 照片 ， 其 文件 的 扩展 名 为 .jpg 或 jpeg。 和 GIF 格式 文件 
不 同 ，JPEG 格式 文件 的 压缩 技术 十 分 先进 ， 它 使 用 有 损 压 缩 的 方式 去 除 元 余 的 图 像 和 彩色 数 
据 ， 在 获取 极 高 压缩 率 的 同时 ， 能 展现 十 分 丰富 、 生 动 的 图 像 。 它 在 处 理 颜色 和 图 形 细节 方 
面 比 GIF 格式 文件 要 好 ， 在 复杂 微 标 和 图 像 镜 像 等 方面 应 用 得 更 为 广泛 ， 特 别 适合 在 网 上 发 


布 照 片 。 图 7-2 所 示 为 JPEG 格式 的 图 像 。 


图 7-2 JPEG 格式 的 图 像 


国有 


台 


GIF 格式 文件 和 JPEG 格式 文件 各 有 优点 ， 应 根据 实际 的 图 片 文件 来 决定 采用 哪 种 格式 。 
这 两 种 文件 的 特点 对 比如 表 7-1 所 示 。 


表 7-1 GIF 和 JPEG 格式 文件 的 区 别 







[ola JPEG/JPG 






















色彩 | 16 色 、256 色 真 彩色 

特殊 功能 | 透明 背景 、 动 画 效果 无 

压缩 是 否 有 损失 。 | 无 损 压缩 有 损 压 缩 

ee 颜色 有 限 ， 主 要 以 漫画 图 案 或 线条 为 主 ， | 颜色 丰富 ， 有 连续 的 色调 ， 一 般 用 于 
一 般 用 于 表现 建筑 结构 图 或 手绘 图 表现 真实 的 事物 





7.1.3 PNG 格式 


PNG 格式 是 近 几 年 开始 流行 的 一 种 全 新 的 无 显示 质量 损耗 的 文件 格式 。 它 避免 了 GIF 格 
式 文件 的 一 些 缺点 ， 是 一 种 替代 GIF 格式 的 无 专利 权限 的 格式 ， 支 持 索引 色 、 灰 度 、 真 彩色 
图 像 及 Alpha 透明 通道 。 PNG 格式 是 Fireworks 固有 的 文件 格式 。 

PNG 格式 汲取 了 GIF 格式 和 JPEG 格式 
的 优点 ， 存 储 形式 丰富 ， 兼 有 GIF 格式 和 
JPEG 格式 的 色彩 模式 。 图 7-3 所 示 为 PNG 
格式 的 图 像 。 

PNG 格式 能 把 图 像 文 件 大 小 压缩 到 极 
限 ， 以 利于 网 络 的 传输 ， 却 不 失真 。 PNG 采 
用 无 损 压缩 方式 来 减 小 文件 的 大 小 。PNG 格 
式 的 图 像 显 示 速 度 快 ， 只 需要 下 载 1/64 的 图 
像 信息 就 可 以 显示 出 低 分 辩 率 的 预览 图 像 。 
PNG 格式 同样 支持 透明 图 像 的 制作 。 

PNG 格式 文件 可 保留 所 有 原始 层 、 向 量 、 颜 色 、 效 果 等 信息 ， 并 且 在 任何 时 候 所 有 元 素 
都 是 可 以 完全 编辑 的 。 


洲 导 局 瑟 究 法 NT 庆 困 至 户 - 攻 类 二 本 省 二/ 洲 


AG 





图 7-3 PNG 格式 的 图 像 


7.2 用 图 像 美 化 网 页 


无 论 是 个 人 网 站 还 是 企业 网 站 ， 图 文 并 茂 的 网 页 都 能 为 网 站 增色 不 少 。 用 图 像 美化 网 页 
会 使 网 页 变 得 更 加 美观 、 生 动 ， 从 而 吸引 更 多 浏览 者 。 


7.2.1 案例 1 一 一 插入 图 像 


在 文件 中 插入 漂亮 的 图 像 会 使 网 页 更 加 美观 ， 使 页 面 更 具 吸引 力 。 在 网 页 中 插入 图 像 的 
有 具体 操作 步骤 如 下 。 
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EC 新 建 一 个 空白 文档 ， 将 光标 放置 在 要 插入 图 像 的 位 置 ， 在 【插入 】 面 板 的 【 常 
用 】 选 项 卡 中 单 击 【图 像 】 按 钮 ， 在 打开 的 下 拉 列 表 中 选择 【图 像 】 选 项 ， 如 图 7-4 
所 示 。 用 户 也 可 以 选择 【插入 】 一 【图 像 】 一 【图 像 】 命 令 ， 如 图 7-5 所 示 。 


I sw a0) 会 S(O ws(s) OW) sm 
Di(D) 
HTML5 Video(V) Ctrl+At+ShifttV 
画布 AI) 














图 7-4 【插入 】 面 板 图 7-5 选择 【图 像 】 命 令 

TY 打开 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 要 插入 的 图 像 文 件 ， 然 后 单 击 【 确 
定 】 按 钮 ， 如 图 7-6 所 示 。 

EETBY 即 可 完成 向 文档 中 插入 图 像 的 操作 ， 如 图 7-7 所 示 。 
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ESN: 1jpg -| Wet Cob jpg "peg Pp 
Mmea| [| we |] ws Cre) LER 
图 7-6 【选择 图 像 源 文 件 】 对 话 框 7-7 ”插入 图 像 


EC 保存 文 要 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 7-8 所 示 。 
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7.2.2 ”案例 2 一 一 设置 图 像 的 属性 


在 页 面 中 插入 图 像 后 单 击 选 定 图 像 ， 此 时 图 
像 的 周围 会 出 现 边框 ， 表 示 图 像 正 处 于 选中 状 
态 ， 如 图 7-9 所 示 。 

可 以 在 【属性 】 面 板 中 设置 该 图 像 的 属性 ， 
如 设置 源 文件 、 输 入 蔡 换 文本 、 设 置 图 片 的 宽 与 
高 等 ， 如 图 7-10 所 示 。 


1. 【地 图 】〗 文 本 框 


该 文本 框 用 于 创建 客户 端 图 像 的 热 区 ， 在 该 文 图 7-9 选中 图 像 
本 框 中 可 以 输入 地 图 的 名 称 ， 如 图 7-11 所 示 。 



































导入 
[i 7k Sre [1 jpe 名 4 | 无 -| 殉 ()461 yx ~ 获 换 (T) 
DM 9 已 国 中 > 对 BOA B35 wo" 
地 图 目标 (R) 
DDoS 原 抬 OD 


图 7-10 【属性 】 面 板 7-11 图 像 地 图 设置 区 域 





Se 输入 的 名 称 中 只 能 包含 字母 和 数字 ， 并 且 不 能 以 数字 开头 。 








SRE te hen EE 


2. 【热点 工具 】 按 钮 由 DOD 

单 击 这 些 按钮 ， 可 以 创建 图 像 的 热 区 链接 。 
3. 【 宽 〗 和 【高 〗】 文 本 框 

这 两 个 文本 框 用 于 设置 在 浏览 器 中 显示 图 像 的 














宽度 和 高 度 ， 以 像素 为 单位 ， 如 图 7-12 所 示 。 比 


an 日 十 EEE 














如 ， 在 【 宽 】 文 本 框 中 输入 宽度 值 ， 页 面 中 的 图 片 
即 会 显示 相应 的 宽度 。 图 7-12 设置 图 像 的 宽 与 高 


En 宽 和 高 的 单位 除 像素 外 ， 还 有 pe( 十 二 点 活字 )、pt( 点 )、in( 英 寸 )、mm( 毫 米 )、 
外 ”cm( 厘 米 ) 和 类 似 2in+Smm 的 单位 组 合 等 。 
调整 后 ， 这 两 个 文本 框 的 右 侧 将 显示 【 重 设 图 像 大 小 】 按 钮 [@@， 单 击 该 按钮 ， 可 恢复 图 
像 到 原来 的 大 小 。 
4. Src( 源 文件 ) 文 本 框 
该 文本 框 用 于 指定 图 像 的 路 径 。 单 击 文本 框 右 侧 的 【浏览 文件 】 按 钮 回 ， 打 开 【 选 择 图 
像 源 文件 】 对 话 框 ， 可 从 中 选择 图 像 文件 ， 或 直接 在 文本 框 中 输入 图 像 路 径 ， 如 图 7-13 所 示 。 
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国 图片 
| 目 姥 chol ch04 images Scripts 
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CE he 
= Windows (C) 
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图 7-13 【选择 图 像 源 文件 】 对 话 框 
5. 【链接 】〗 文 本 框 


该 文本 框 用 于 指定 图 像 的 链接 文件 。 可 拖 动 【指向 文件 】 图 标 够 到 【文件 】 面 板 中 的 某 
个 文件 上 ， 或 直接 在 【链接 】 文 本 框 中 输入 URL 地 址 ， 如 图 7-14 所 示 。 








Ljpe :3 状元 ~] 更 GD) 461 [px vj 殖 换 (7) 
树 接 (L) | baidu com DD 
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图 7-14 【链接 】 文本 框 
6. 【目标 】〗】 下 拉 列 表 框 


该 下 拉 列 表 框 用 于 指定 链接 页 面 在 框架 或 











后 Hk Sre ll jpe GD lu 
可 | 讽 扩 中 iaiem | 已 出 


地 图 0m) 目标 (R) | 









[INIDOS 原始 
窗口 中 的 打开 方式 ， 如 图 7-15 所 示 。 
在 弹出 的 下 拉 列 表 中 有 以 下 几 个 选项 。 
@ blank: 在 打开 的 新 浏览 器 窗口 中 打 图 7-15 设置 图 像 目 标 
开 链 接 文 件 。 
Dd 


_parent: 如 果 是 嵌 套 的 框架 ， 会 在 父 框架 或 窗口 中 打开 链接 文件 ， 如 果 不 是 嵌 套 的 
框架 ， 则 与 top 相同 ， 在 整个 浏览 器 窗口 中 打开 链接 文件 。 


ee _self: 在 当前 网 页 所 在 的 窗口 中 打开 链接 。 此 目标 为 浏览 器 默认 的 设置 。 
ee _top: 在 完整 的 浏览 器 窗口 中 打开 链接 文件 ， 因 而 会 删除 所 有 的 框架 。 
7. 【原始 】〗 文 本 框 


该 文本 框 用 于 设置 图 像 下 载 完成 前 显示 的 低 质 量 图 像 ， 这 里 一 般 指 PNG 图 像 。 单 击 旁边 
的 【浏览 文件 】 按 钮 回 ， 即 可 在 打开 的 对 话 框 中 选择 低 质量 图 像 ， 如 图 7-16 所 示 。 
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7-16 选择 低 质量 图 像 


hn mm 


该 文本 框 用 来 设置 图 像 的 说 明 性 文字 ， 用 于 在 浏览 器 不 者 vie 
显示 图 像 时 替代 图 像 显示 的 文本 ， 如 图 7-17 所 示 。 治 


7.2.3 ”案例 3 一 一 设置 图 像 对 齐 方式 


图 像 的 对 齐 方式 主要 是 设置 图 像 与 同一 行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 齐 方式 。 对 
齐 图 像 的 具体 操作 步骤 如 下 。 
EEC 在 文档 窗口 中 选 定 要 对 齐 的 图 像 ， 如 图 7-18 所 示 。 
EEC 选择 【格式 】 一 【对 齐 】 一 【 左 对 齐 】 命 令 后 ， 效 果 如 图 7-19 所 示 。 
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图 7-17 设置 图 像 替 换文 本 
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= (et 间 
导入 式 主 要 是 设置 图 像 与 同一 行 中 的 文本 或 另 一 个 图 你 等 元 素 的 对 
式 。 


入 与 同行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 刘 方 式 。 























| 
En CI ETE | edn EI EAE 








图 7-18 ”选择 图 像 图 7-19 图 像 左 对 齐 


EERBp 选择 【格式 】 一 【对 齐 】 一 【居中 对 齐 】 命 令 后 ， 效 果 如 图 7-20 所 示 。 
EC 选择 【格式 】 一 【对 齐 】 一 【 右 对 齐 】 命 令 后 ， 效 果 如 图 7-21 所 示 。 
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< 图 像 的 对 齐 方式 主要 是 设置 图 
像 与 同 一 行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 开 方 式 - | 
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图 党 的 对 刘 方 式 主要 是 设置 轩 
人 与 所 一行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 并 方式 。 
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7-20 图 像 居 中 对 齐 


7.2.4 ”案例 4 一 一 剪裁 需要 的 图 像 


7-21 图 像 右 对 齐 


在 网 页 中 插入 图 像 后 ， 如 果 只 需要 插入 图 像 的 部 分 内 容 ， 此 时 就 可 以 通过 裁剪 功能 裁剪 


需要 的 部 分 。 有 具体 操作 步骤 如 下 。 


EEJDy 在 文档 窗口 中 选 定 要 剪裁 的 图 像 ， 如 图 7-22 所 示 。 
ECG 在 【属性 】 面 板 中 单 击 【 裁 剪 】 按 钮 至， 启用 裁剪 工具 ， 如 图 7-23 所 示 。 
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图 7-22 选择 图 像 


7-23 单 击 【 栽 剪 】 按 钮 


EETE> 被 选中 的 图 像 上 出 现 一 个 黑色 方 框 ， 移 动 该 方 框 到 需要 的 裁 前 图 像 位置 ， 拖 动 
方 框 四 周 的 控制 点 至 需要 的 图 像 内 容 ， 如 图 7-24 所 示 。 
ED 调整 好 需要 保留 的 图 像 内 容 后 ， 双 击 鼠 标 左 键 完成 裁剪 操作 ， 如 图 7-25 所 示 。 
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图 7-24 载 剪 图 像 





7-25 ”完成 裁剪 图 像 


国 玫 BY 保存 文档 ， 单 击 【 预 览 】 按 钮 名 |， 在 弹出 的 下 拉 菜单 中 选择 预览 方式 ， 如 图 7-26 


所 示 。 


EECSUD) 启动 下 浏览 器 ， 在 其 中 即 可 查看 到 裁剪 图 片 后 的 效果 ， 如 图 7-27 所 示 。 
[TREE 了 
文 忻 们 办 瀑 (日 。 豆 看 )。 收 茂 闪 (A) 工具 (帮助 (H) 
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着 3 半 吾 闪 妆 J 区 当 窜 一 部 吕 册 四 让 二/ 兴 轩 


图 7-26 选择 预览 方式 7-27 预览 坟 前 后 的 图 像 
5 在 确定 需要 保留 的 图 片 内 容 后 ， 直 接 按 Enter 键 可 以 快速 执行 坟 剪 图片 的 操作 。 
7.2.5 “案例 5 一 一 调整 图 像 的 亮度 与 对 比 度 





在 网 页 中 插入 图 片 后 ， 如 果 发 现 图 片 的 亮度 与 对 比 度 不 符合 需求 ， 可 以 通过 【亮度 /对 比 
度 】 对 话 框 ， 对 其 亮度 与 对 比 度 值 进行 自 定义 调整 。 具 体操 作 步 骤 如 下 。 

EEC 在 文档 窗口 中 选 定 要 调整 亮度 和 对 比 度 的 图 像 ， 如 图 7-28 所 示 。 

区 TY 在 【属性 】 面 板 中 单 击 【 亮 度 和 对 比 度 】 按 钮 中， 如 图 7-29 所 示 。 
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Pe 
已 | 畴 中 对 @I A 0 


hodv> Im] me. = 3 BD 
图 7-28 选择 图 像 7-29 单 击 【亮度 和 对 比 度 】 按 钮 
EEDep 打开 【亮度 /对 比 度 】 对 话 框 ， 在 其 中 输入 亮度 与 对 比 度 的 值 ， 或 通过 调整 亮度 
与 对 比 度 下 方 的 滑 块 来 确定 亮度 与 对 比 度 的 值 ， 如 图 7-30 所 示 。 


ETTZY 单 击 【确定 】 按 钮 ， 完 成 图 像 亮度 与 对 比 度 的 调整 ， 如 图 7-31 所 示 。 
本 TB> 保存 文档 ， 单 击 【预览 】 按 钮 贺 ， 在 弹出 的 下 拉 菜 单 中 选择 预览 方式 ， 如 图 7-32 























所 示 。 
本 >》 启动 下 浏览 器 ， 在 其 中 即 可 查看 到 调整 图 像 亮 度 和 对 比 度 后 的 效果 ， 如 图 7-33 
所 示 。 
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图 7-30 【亮度 /对 比 度 】 对 话 框 7-31 调整 图 像 














图 7-32 选择 预览 方式 图 7-33 ”预览 图 像 效 果 


7.2.6 ”案例 6 一 一 设置 图 像 的 锐 化 效果 
设置 图 像 的 锐 化 效果 可 以 提高 图 像 边缘 轮廓 的 清晰 度 ， 从 而 让 整个 图 像 更 加 清晰 。 具 体 
操作 步骤 如 下 。 


EEDD 在 文档 窗口 中 选 定 需要 锐 化 的 图 像 ， 如 图 7-34 所 示 。 
EEJ2p 在 【属性 】 面 板 中 单 击 【 锐 化 】 按 钮 中， 如 图 7-35 所 示 。 
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7-34 选择 图 像 7-35 单 击 【 锐 化 】 按 钮 
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第 
ECEDS 打开 【 锐 化 】 对 话 框 ， 拖 动 滑 块 可 实时 预览 调整 图 像 的 锐 化 效果 ， 如 图 7-36 宫 
所 示 。 
EEC 单 击 【确定 】 按 钮 ， 完 成 图 像 锐 化 的 调整 ， 如 图 7-37 所 示 。 加 
曾 uriteaz 有 
| 
使 
用 
图 
像 
与 
锐 化 x 多 
ba CD 强 
ee 从 
[ma 。 页 
怠 奥 [boav Einey] 429 # 314v 元 和 包 
素 
图 7-36 【 锐 化 】 对 话 框 图 7-37 ”调整 图 像 锐 化 效果 
ECG 保存 文档 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 预览 方式 ， 如 图 7-38 
所 示 。 
区 于 BY 启动 正 浏览 器 ， 在 其 中 即 可 查看 到 图 像 设置 锐 化 效果 后 的 效果 ， 如 图 7-39 所 示 。 
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实时 视图 标题 ， 无 标 是 文档 
预 站 方式 : 360se6 
方式 : IEXPLORE FI2 


编辑 浏览 器 列表 (E)..… 























图 7-38 选择 预览 方式 图 7-39 ”预览 图 像 效 果 


7.3 插入 其 他 图 像 元 素 


在 网 页 中 不 仅 可 以 插入 图 像 文件 ， 还 可 以 插入 其 他 图 像 元 素 ， 如 插入 鼠标 经 过 图 像 、 
像 占 位 符 、 图 像 热点 区 域 等 。 


7.3.1 案例 7 一 一 插入 鼠标 经 过 图 像 


鼠标 经 过 图 像 是 指 在 浏览 器 中 查看 在 鼠标 指针 移 过 它 时 发 生变 化 的 图 像 。 鼠 标 经 过 图 像 
实际 上 是 由 两 幅 图 像 组 成 的 ， 即 初始 图 像 (页 面 首次 加 载 时 显示 的 图 像 ) 和 蔡 换 图 像 (鼠标 指针 
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经 过 时 显示 的 图 像 )。 
插入 鼠标 经 过 图 像 的 具体 操作 步骤 如 下 。 
EC 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 鼠标 经 过 图 像 的 位 置 ， 选 择 【 插 入 】 一 
【图 像 】 一 【鼠标 经 过 图 像 】 命 令 ， 如 图 7-40 所 示 。 


mn 也 可 以 在 【插入 】 面 板 的 【常用 】 选 项 卡 中 单 击 【 图 像 】〗】 按 钮 ， 然 后 从 弹出 的 下 
外 。 拉 列 表 中 选择 【和 鼠标 经 过 图 像 〗 选 项 ， 如 图 7-41 所 示 。 


[wm ter) es(O Wits) gOW Nm 
DivD) 
HTMLS Video(V) Carl+Ak+Shift+V 
画布 (A) 


0) Chl+Alrl 





图 7-40 选择 【鼠标 经 过 图 像 】 命 令 图 7-41 选择 【鼠标 经 过 图 像 】 选 项 
EEC 打开 【插入 鼠标 经 过 图 像 】 对 话 框 ， 在 【图 像 名 称 】 文 本 框 中 输入 一 个 名 称 (这 
里 保持 默认 名 称 不 变 )， 如 图 7-42 所 示 。 

EERS9 单 击 【原始 图 像 】 文 本 框 右 侧 的 【浏览 〗】 按 钮 ， 在 打开 的 【原始 图 像 】 对 话 杠 

中 选择 鼠标 经 过 前 的 图 像 文件 ， 设 置 完 成 后 单 击 【确定 】 按 钮 ， 如 图 7-43 所 示 。 





Soa 和 















































个 ,2 Be 总 “二 击 
Ha ga 天 。 四 
EE 
apin 
招展 标 经 过 加 从 x LE kh 
司 mk 
图 参 名 条- [Inased| | | EE 六 dhol cho images Seripts 
职 洁 | Dind =— 
ase -=— ee = 一 
委 本 相 人 图- - 绩 二 证 本 了 rg 
电视 吉 村 椒 这 图 widowatc | 
境 杰 袜 本 二 rm 0 py Er 
态 吕 Em 
ee] 
按 Faf 前 的 RE 1 本 
ein Reoit'jpozjpeorp “| 
| 站 目 好 BE | | WW 
图 7-42 【插入 鼠标 经 过 图 像 】 对 话 框 图 7-43 ”选择 原始 图 像 


EC 返回 【插入 鼠标 经 过 图 像 】 对 话 框 ， 在 【原始 图 像 】 文 本 框 中 即 可 看 到 添加 的 
原始 图 像 文件 ， 如 图 7-44 所 示 。 

ECSRD 单 击 【鼠标 经 过 图 像 】 文 本 框 右 侧 的 【浏览 〗】 按 钮 ， 在 打开 的 【鼠标 经 过 图 
像 】 对 话 框 中 选择 鼠标 经 过 原始 图 像 时 显示 的 图 像 文 件 ， 如 图 7-45 所 示 。 然 后 单 击 
【确定 】 按 钮 ， 返 回 【插入 鼠标 经 过 图 像 】 对 话 框 。 
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图 7-44 添加 的 原始 图 像 图 7-45 选择 鼠标 经 过 图 像 


ET> 在 【 蔡 换文 本 】 文 本 框 中 输入 名 称 (这 里 不 再 输入 )， 并 选中 【 预 教 鼠 标 经 过 图 
像 】 复 选 框 。 如 果 要 建立 链接 ， 可 以 在 【 按 下 时 ， 前 往 的 URLY 文本 框 中 输入 URL 
地 址 ， 也 可 以 单 击 右 侧 的 【浏览 】 按 钮 ， 选 择 链接 文件 (这 里 不 填 )， 如 图 7-46 所 示 。 

ET 单 击 【 确 定 】 按 钮 ， 关 闭 对 话 框 ， 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 
鼠标 指针 经 过 前 的 图 像 如 图 7-47 所 示 。 
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图 7-46 设置 其 他 参数 图 7-47 预览 网 页 


鼠标 指针 经 过 后 的 图 像 如 图 7-48 所 示 。 
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图 7-48 ”鼠标 指针 经 过 后 显示 的 图 像 
7.3.2 ”案例 8 一 一 插入 图 像 占 位 符 


在 布局 页 面 时 ， 有 的 时 候 可 能 需要 插入 的 图 像 还 没有 制作 好 。 为 了 整体 页 面 效果 的 统一 ， 
此 时 可 以 使 用 图 像 占 位 符 来 蔡 代 图 片 的 位 置 ， 待 网 页 布局 好 后 ， 再 根据 实际 情况 插入 图 像 。 
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插入 图 像 占 位 符 的 具体 操作 步骤 如 下 。 

TD 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 图 像 占 位 符 的 位 置 。 切 换 到 代码 视图 ， 
然后 添加 如 下 代码 ， 设 置 图 片 的 宽度 和 高 度 为 550 和 80， 蔡 换文 本 为 “Banner 位 
置 ”， 如 图 7-49 所 示 。 


<img src="" width="550" height="80" alt="Banner 位 置 " /> 


切换 到 设计 视图 ， 即 可 看 到 插入 的 图 像 占 位 符 ， 如 图 7-50 所 示 。 
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src="" width=n559" height="ae" alt="Banner 位 置 " /></a> 
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图 7-49 代码 视图 图 7-50 设计 视图 


7.3.3 ”案例 9 一 一 插入 图 像 热 点 区 域 














图 像 的 热点 区 域 是 在 一 张 图 片上 的 不 同 部 位 绘制 任意 多 边 形 或 者 图 形 的 区 域 ， 并 加 入 链 
接 的 一 种 方法 。 在 图 像 中 插入 热点 区 域 的 具体 操作 步骤 如 下 。 
EEC 在 文档 窗口 中 选 定 需 要 插入 热点 区 域 的 图 像 ， 如 图 7-51 所 示 。 
EEC 在 【属性 】 面 板 中 选择 热点 工具 ， 这 里 选择 多 边 形 工具 ， 如 图 7-52 所 示 。 
地 外 
nx Dy 















































图 7-51 选择 图 像 图 7-52 选择 多 边 形 工具 
ECDIS 在 图 片 的 指定 位 置 处 单 击 添加 一 个 热点 ， 然 后 使 用 相同 的 方法 继续 在 图 片 指定 
位 置 绘制 其 他 热点 ， 从 而 完成 图 像 热 区 的 绘制 ， 如 图 7-53 所 示 。 


EC 在 【属性 】 面 板 中 的 【链接 】 文 本 框 中 设置 该 热 区 需要 链接 的 位 置 ， 这 里 输入 
wlmq.com， 即 链接 到 当前 页 面 ， 如 图 7-54 所 示 。 
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图 7-53 绘制 热点 区 域 
ECG 保存 文档 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 预览 方式 ， 如 图 7-55 


所 示 。 


EECRD 启动 正 浏览 器 ， 在 打开 的 页 面 中 将 鼠标 指针 移动 到 热 区 上 ， 此 时 鼠标 指针 变 为 











手 形 ， 单 击 可 以 执行 链接 跳 转 ， 如 图 7-56 所 示 。 


,视图 | 名 | 标题: 匹克 


预 中方 式 : 360se6 


妨 张 浏览 器 列表 (E)-… 


= 


图 7-55 选择 预览 方式 


7-54 设置 链接 














图 7-56 预览 图 像 热点 区 域 


7.4 在 网 页 中 插入 多 媒体 


在 网 页 中 插入 多 媒体 是 美化 网 页 的 一 种 方法 。 常 见 的 网 页 多 媒体 有 背景 音乐 、Flash 动 
画 、FLV 视频 、HTML 5 音频 和 HTML 5 视频 等 。 


7.4.1 案例 10 一 一 插入 背景 音乐 


通过 添加 背景 音乐 ， 可 以 使 网 页 一 打开 就 能 听 到 舒适 的 音乐 。 


在 网 页 中 插入 背景 音乐 的 具体 操作 步骤 如 下 。 
EC 新 建 一 个 空白 文档 ， 切 换 到 代码 视图 ， 然 后 在 <head> 和 </head> 标 签 之 间 添 加 如 


下 代码 ， 设 置 背景 音乐 的 路 径 ， 如 图 7-57 所 示 。 
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<bgsound src="/ch04/song-mp3"> 


人 ea bgsound 标签 的 属性 比较 多 ， 和 包括 src、balance、volume 和 delay。 各 个 属性 的 含 
A 义 如 下 . 
(1) src 属性 : 用 于 设置 音乐 的 路 径 。 
(2) balance 属性 : 用 于 设置 声 道 ， 取 值 范围 为 -1000 到 1000， 其 中 负 值 代表 左 
声 道 ， 正 值 代表 右 声 道 ，0 代表 立体 声 。 
(3) volume 属性 : 用 于 设置 音量 大 小 。 
(4) delay 属性 : 用 于 设置 播放 的 延 时 。 
(5) loop 属性 : 用 于 设置 循环 播放 次 数 ， 其 中 loop--1， 代 表 音 乐 一 直 循环 播放 。 
国保 存 网 页 后 ， 单 击 【 预 览 】 按 钮 ， 在 打开 的 菜单 中 选择 预览 方式 ， 如 图 7-58 所 
示 。 启 动 浏览 器 即 可 预览 到 效果 。 








文件 (有 ”六 太 (5) ”可 看 (V) 插入 (1】 修改 (M) 相 式 (0) 命令 (Q ”站 点 (S) 窗 D(W) 
10] 扳 7 | 谢 4 刘 拖 图 |[ 世 ] 村 是: 无 各 文 村 :到 


Se: 
<!doctype html> 
ht 六 入 刘 洛 关 列表 (E).。 


«head> 
<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<bssound src="/chea/song.mpa"> 
</head> 

<body> 

</body> 

</html> 














会 孝 对 中信 闫 口 |5 


图 7-57 代码 视图 图 7-58 选择 预览 方式 


7.4.2 ”案例 11 一 一 插入 Flash 动画 
Flash 与 Shockwave 电影 相 比 ， 其 优势 是 文件 小 且 网 上 传输 速度 快 。 在 网 页 中 插入 Flash 


动画 的 具体 操作 步骤 如 下 。 


EC 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 Flash 动画 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 Flash SWF 命令 ， 如 图 7-59 所 示 。 


打开 【选择 SWF】 对 话 框 ， 从 中 选择 相应 的 Flash 文件 ， 如 图 7-60 所 示 。 
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7-59 选择 Flash SWF 命令 7-60 选择 SWF 文件 
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ES 单 击 【 确 定 】 按 钮 ， 打 开 【 对 象 标签 辅助 功能 属性 】 对 话 框 ， 输 入 对 象 标签 畏 
助 的 标题 ， 如 图 7-61 所 示 。 

单 击 【确定 】 按 钮 ， 插 入 Flash 动画 ， 然 后 调整 Flash 动画 的 大 小 ， 使 其 适应 网 

页 ， 如 图 7-62 所 示 。 
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图 7-61 【对 象 标签 辅助 功能 属性 】 对 话 框 图 7-62 插入 Flash 动画 
本 了 BY 保存 文档 ， 按 Fl12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-63 所 示 。 
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图 7-63 ”预览 网 页 动画 
7.4.3 ”案例 12 一 一 插入 FLV 视频 


用 户 可 以 向 网 页 中 轻松 地 添加 FLV 视频 ， 而 无 须 使 用 Flash 创作 工具 。 在 开始 操作 之 

前 ， 必 须 有 一 个 经 过 编码 的 FLV 文件。 

ED 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 Flash 动画 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 Flash Video 命令 ， 如 图 7-64 所 示 。 

EC 打开 【插入 FLV】 对 话 框 ， 从 【视频 类 型 】 下 拉 列 表 框 中 选择 视频 类 型 ， 这 里 
选择 【累进 式 下 载 视频 】 选 项 ， 如 图 7-65 所 示 。 
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7-64 选择 Flash Video 命令 


7-65 【插入 FLV】 对 话 框 


re 所 谓 累进 式 下 载 视频 ， 是 将 FLV 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 然 后 播放 。 


了 提示 
SN 但是， 与 传统 的 “下 载 并 播放 视频 传送 方法 不 同 ， 累 进 式 下 载 允 许 在 下 载 完成 之 前 
就 开始 播放 视频 文件 。 也 可 以 选择 【 流 视 频 】〗 选 项 ， 选 择 此 选项 后 下 方 的 选项 区 域 也 
会 随 之 发 生变 化 ， 接 着 可 以 进行 相应 的 设置 ， 如 图 7.66 所 示 . 
“ 流 视频 ”对 视频 内 容 进 行 流 式 处 理 ， 并 在 一 段 可 确保 流畅 播放 的 很 短 的 缓冲 时 
SS 间 后 在 网 页 上 播放 该 内 容 。 


EC) 在 URL 文本 框 右 侧 单 击 【浏览 】 按 钮 ， 即 可 在 打开 的 【选择 FLV】 对 话 框 中 选 
择 要 插入 的 FLV 文件 ， 如 图 7-67 所 示 。 
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图 7-66 选择 【 流 视频 】 选 项 图 7-67 【选择 FLV】 对 话 框 


EC 返回 【插入 FLV】 对 话 框 ， 在 【外 观 】 下 拉 列 表 框 中 选择 设置 显示 出 来 的 播放 
器 外 观 ， 如 图 7-68 所 示 。 


EECDUD 接着 设置 【宽度 】 和 【高 度 】， 并 选中 【限制 高 宽 比 】、【 自 动 播放 】 和 【 自 
动 重新 播放 】 等 3 个 复 选 框 ， 完 成 后 单 击 【 确 定 】 按 钮 ， 如 图 7-69 所 示 。 
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加 要 观看 视 所 ， 漂 在 浏 邱 敌 中 加 上 而 画 * ® 要 现在 栅 预 ， 访 在 浏览 器 中 思 瞎 页面。 从 
图 7-68 选择 外 观 7-69 设置 其 他 参数 a 

案 


rr “包括 外 观 ” 是 FLV 文件 的 宽度 和 高 度 与 所 选 外 观 的 宽度 和 高 度 相 加 得 出 
的 和 。 
单 击 【 确 定 】 按 钮 关闭 对 话 框 ， 即 可 将 FLV 文件 添加 到 网 页 上 ， 如 图 7-70 所 示 。 
保存 页 面 后 按 F12 键 ， 即 可 在 浏览 器 中 预览 效果 ， 如 图 7-71 所 示 。 
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EXHIBITON 
REED TT 
图 7-70 在 网 页 中 插入 FLV 文件 7-71 ”预览 网 页 


7.4.4 案例 13 一 一 插入 HTML 5 音频 


Dreamweaver CC 支持 插入 HTML 5 音频 的 功能 。 在 网 页 中 插入 HTML 5 音频 的 具体 操作 
步骤 如 下 。 
EEJIY 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 HIML 5 音频 的 位 置 ， 选 择 【 插 入 】 一 
【媒体 】 一 HTML 5 Audio 命令 ， 如 图 7-72 所 示 。 
ETIZY 即 可 看 到 插入 一 个 音频 图 标 ， 在 【属性 】 面 板 中 单 击 【 源 】 文 本 框 右 侧 的 【 浏 
览 】 按 钮 ， 如 图 7-73 所 示 。 
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7-72 选择 HTML 5 Audio 命令 








i 








7-73 ” 单 击 【浏览 】 按 钮 


EEJRS 打开 【选择 音频 】 对 话 框 ， 选 择 “\ch07\songmp3” 文 件 ， 单 击 【确定 】 按 钮 ， 


如 图 7-74 所 示 。 


EEC 返回 到 设计 视图 中 ， 保 存 网 页 后 ， 单 击 【预览 】 按 钮 ， 在 弹出 的 菜单 中 选择 预 


览 方式 ， 如 图 7-75 所 示 。 
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7-74 【选择 音频 】 对 话 框 


DW 文人 (六 纺 (E) 王 看 (V) 插入 (I) 修改 (M) 格式 (0) 命令 (O 
| 人 | 折 CRf] 褒 捉 图 标 是 元 标 是 和 


Untitled-3.html x Et Fl2 
入 强 浏 览胜 列 表 (E).… 











7-75 选择 预览 方式 


EECRD) 启动 浏览 器 即 可 预览 效果 ， 用 户 可 以 控制 播放 属性 和 声音 大 小 ， 如 图 7-76 所 示 。 
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7-76 ”查看 预览 效果 
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7.4.5 “案例 14 一 一 插入 HTML 5 视频 


Dreamweaver CC 支持 插入 HTML 5 视频 的 功能 。 在 网 页 中 插入 HTML 5 视频 的 具体 操作 
步骤 如 下 。 
EEJDp 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 HIML 5 视频 的 位 置 ， 选 择 【 插 入 】 一 
【媒体 】 一 HIML 5 Video 命令 ， 如 图 7-77 所 示 。 
EDP9 即 可 看 到 插入 了 一 个 视频 图 标 ， 在 【属性 】 面 板 中 单 击 【 源 】 文 本 框 右 侧 的 
【浏览 】 按 钮 ， 如 图 7-78 所 示 。 
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图 7-77 选择 HTML 5 Video 命令 图 7-78 单 击 【 浏 览 】 按 钮 
SSTE 打开 【选择 视频 】 对 话 框 ， 选 择 “\ch07\123.mp4”"， 单 击 【 确 定 】 按 钮 ， 如 图 7-79 


所 示 。 
EEC 返回 到 设计 视图 中 ， 保 存 网 页 后 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 预览 方式 ， 如 图 7-80 所 示 。 
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7-79 【选择 视频 】 对 话 框 7-80 选择 预览 方式 


EECUD) 启动 浏览 器 即 可 预览 效果 ， 用 户 可 以 控制 播放 属性 和 声音 大 小 ， 如 图 7-81 所 示 。 
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图 7-81 查看 预览 效果 


7.5 综合 案例 1 一 一 制作 精彩 的 多 媒体 网 页 


-个 网 页 中 可 以 包括 多 种 网 页 元 素 ， 如 文本 、 图 人像、 视频、 动画 等 。 使 用 Dreamweaver 
CC， 用 户 可 以 制作 包含 多 种 元 素 的 多 媒体 网 页 。 下 面 介绍 创建 多 媒体 网 页 的 具体 操作 步 又 。 
jy 启动 Dreamweaver CC， 选 择 【 文 件 】 一 【新 建 】 命 令 ， 创 建 一 个 空白 网 页 文 
档 ， 如 图 7-82 所 示 。 
E57 选择 【插入 】 一 【图 像 】 一 【图 像 】 菜 单 命令 ， 打 开 【 选 择 图 像 源 文件 】 对 话 
框 ， 在 其 中 选择 要 插入 的 图 像 ， 如 图 7-83 所 示 。 
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7-82 ”创建 空白 文档 7-83 ”选择 要 插入 的 图 像 


EB 单 击 【确定 】 按 钮 ， 即 可 将 选中 的 图 片 添加 到 空白 网 页 之 中 ， 如 图 7-84 所 示 。 

EYY 将 光标 定位 在 图 片 的 下 方 ， 在 其 中 输入 相关 文本 信息 ， 并 设置 文本 的 字号 、 字 
体 的 颜色 、 样 式 等 ， 如 图 7-85 所 示 。 

EGRDp 将 光标 定位 在 文本 的 下 方 ， 选 择 【 插 入 】 一 【媒体 】 一 【插件 】 命 令 ， 打 开 
【选择 文件 】 对 话 框 ， 在 其 中 选择 需要 的 音乐 文件 ， 如 图 7-86 所 示 。 
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7-84 插入 图 片 








图 7-85 ”输入 文本 
TI 单 击 【 确 定 】 按 钮 ， 即 可 将 音乐 文件 添加 到 网 页 之 中 ， 如 图 7-87 所 示 。 
[a 
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ed uniied2nm 允 涡 基 一 片 讶 内 大 凑 ， 衣 名 商 尿 适 ， 父 玉民 天 人 生 芯 着 办 的 一 盘 鲍 林 ， 站 
乱 栏 展厅 ， 属 关 琵 异 行 娠 . 

| Mt el 四 型 

SR] Cw | 上 pee 


图 7-86 选择 音乐 文件 图 7-87 插入 音乐 文件 


国保 存 文档 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 预览 方式 ， 如 图 7-88 
所 示 。 
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和 营 导 和 大 多， 局 站 斑 记 的 天 时 天 性; 公车 导 一 大 天 内。 其 获 而 护 沪 
姑 肥 在 一 片 汪 洋 大 海 ， 六 遍历 深 汪 :多 宪 起 委 人 生菜 二 办 的 一 要 明 困 下 
轨 类 大 时 ， 民 冯 侨民 疗 娠 . 














图 7-88 选择 预览 方式 


7-89 ”预览 多 媒体 网 页 
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综合 案例 2 一 一 在 代码 中 插入 背景 音乐 


在 制作 网 页 时 ， 除 了 要 尽量 提高 页 面 的 视觉 效果 、 互 动 功能 外 ， 还 需要 尽 可 能 地 提高 网 
页 的 听觉 效果 ， 比 如 为 网 页 插入 背景 音乐 。 下 面 介绍 在 代码 视图 中 插入 背景 音乐 的 具体 操作 


步骤 。 
BIDIP 启动 Dreamweaver CC， 打 开 
所 示 。 


“ch07\ 插 入 背景 音乐 .html” 文 件 ， 如 图 7-90 


EEJP9 单 击 工具 栏 中 的 【代码 】 按 钮 ， 切 换 到 代码 视图 之 中 ， 在 <body> 后 输入 “<” 旬 
号 ， 用 于 显示 标签 列表 ， 这 里 选择 bgsound 选项 ， 如 图 7-91 所 示 。 

















函 cusersqiangu\pocuments 源 fi 十 入 背 条 音乐 html -Ox 








恒 cseragengul Documenti NE 和 ht EE 
































a| 
车 
时 
四 
bd se 
e se 
| 号 
: 日 er 
hod [Gn] 日 加 芭 s2 x 31 
图 7-90 打开 素材 文件 图 7-91 代码 视图 


按 下 空格 键 ， 在 弹出 的 列表 中 选择 sre 选项 ， 设 置 背景 音乐 文件 的 路 径 ， 如 图 7-92 











所 示 。 
SEO 在 弹出 的 列表 中 ， 选 择 【浏览 】 选 项 ， 如 图 7-93 所 示 。 
动 cNwserNqanewvDocumentz\ 床 SNE 入 于 录 罕 未 htm -Ox 提 CNUsers\qiangu\Documents\ 划 9 托 入 和 果 客 沁 phtml 二 
cpe rnt 加 :RE 
<html> 1 2 -* 
Ws | :by 
+ 国 ‘<meta charset="Utf-8"> | 上 "eta charset="utr- 
用 汪 title; 无 标题 文 折 </title> 工 耳 -titte> 无 标题 文档 < Vote 
| 5 </head> </head> 
病 <body><bgsound 


.ing src="5.jpt ， alt=""/> 
.body 


.nr 攻 
2 














<body><bgsound :rc 
ER ing src="5.jpg" wi t="" /> 
/body> 


< /htm > 























图 7-92 设置 背景 音乐 文件 的 路 径 


图 7-93 选择 【浏览 】 选 项 


EEJD9p 打开 【选择 文件 】 对 话 框 ， 在 其 中 选择 要 添加 的 音乐 文件 ， 如 图 7-94 所 示 。 
EC 单 击 【确定 】 按 钮 ， 返 回 到 代码 视图 之 中 ， 如 图 7-95 所 示 。 

EC 按 下 空格 键 ， 在 弹出 的 列表 中 选择 loop 选项 ， 如 图 7-96 所 示 。 
EIBY 在 弹出 的 列表 中 ， 选 择 -1 选项 ， 如 图 7-97 所 示 。 








这 文件 












































个 下 ，we 靖 ， 六 村 ， 淹 k 丙 vo | Bsa 
-一 一- a 函 cusers\qiongu\pocuments\ 琴 1S\ 括 入 等 录 大寺 htmi* -Ox 
123mp4 ClearSkin lanf CesrSkin3swi FployerPror ~ <1doctype htnl> 
ea <htnl> 
<head> 
<meta charset="utf-8"> 
(0) <title> 无 标题 文 要 </title> 
可 </head> 
各 
J} MV Songmp3 Unided-Lheml Unided-2hem <body> <bgsound src="song.mp3" 
pes “483" height="251" alt=""/> 
= Windows (C) 
Dl 
JF 可 
(NY [ongmp3 | ak 
| 站 训 限 a 录 E33 
7-94 【选择 文件 】 对 话 框 7-95 代码 视图 
画 cNuservqergu\pocumenb\ 理 FE 入 湖 开 音 科 him -Ox 夯 CvsersiqianguDocuments VCRVE 和 本 -Ox 





cldoctype html> 
<htmt> 

<head> 

xmeta charset=nutf-an> 
<tittez 无 标题 文档 </titte> 
</head> 


tbodyy<bgsound src="song.mp3" 


</html> ee 从 








EYEEETED 





























<ldoctype html> 
<html> 

<head> 

meta charset="utf-an> 
<title> 无 标题 文档 </title> 
</head> 


<body> <bgsound src="scng.np3" loop="" 

















2 4 


<ing src="5.jpe" width="433" height 
</body> 



































图 7-96 选择 loop 选项 


EETEY 在 属性 值 后 面 输入 “/>” 符 号 ， 在 视图 中 可 以 生成 代码 ， 如 图 7-98 所 示 。 
ED 保存 文档 ， 按 F12 键 ， 即 可 在 浏览 器 中 收听 到 刚刚 添加 的 背景 音乐 ， 如 图 7-99 


所 示 。 


<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body><bgsound src="song.mp3" loop="-1"/> 


</body> 
</html> 


它 巡 内 中洲 端口 


E33 














<img src="5.jpg" width="483" height="251" alt=""/> 





图 7-97 设置 loop 的 值 





司 CWsersqiarouDoc 只 -|| 全 EE 
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7-98 输入 符号 


7-99 ”预览 网 页 
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7.7 疑难 解 惑 
疑问 1: 为 什么 插入 HTML 5 视频 后 不 能 播放 ? 
答 : 在 制作 网 页 时 ， 在 其 中 插入 了 HTML 5 视频 ， 所 有 的 操作 和 语法 都 正确 ， 就 是 不 能 
播放 。 之 所 以 会 出 现 这 种 情况 ， 可 能 是 因为 使 用 的 浏览 器 不 支持 HIML 5， 可 以 换 一 个 浏览 
器 试 一 试 ， 如 搜狗 浏览 器 、360 安全 浏览 器 等 。 


疑问 2: 为 什么 我 在 网 页 中 插入 的 Active 控件 不 能 正常 显示 ? 





答 : 使 用 Dreamweaver 在 网 页 中 插入 Active 控件 后 ， 如 果 浏 览 器 不 能 正常 地 显示 Active 


控件 ， 则 可 能 是 因为 浏览 器 禁用 了 Active 控件 所 致 ， 此 时 可 以 通过 下 面 的 方法 启用 Active 
控件 。 


EEC 打开 下 浏览 器 窗口 ， 选 择 【工具 】 一 【Intermet 选项 】 命 令 。 打 开 【Internet 选 
项 】 对 话 框 ， 选 择 【 安 全 】 选 项 卡 ， 单 击 【 自 定义 级 别 】 按 钮 ， 如 图 7-100 所 示 。 


EEJPp 打开 【安全 设置 -Internet 区 域 】 对 话 框 ， 在 【设置 】 列 表 框 中 启用 有 关 的 Active 
选项 ， 然 后 单 击 【 确 定 】 按 钮 即 可 ， 如 图 7-101 所 示 。 























Internet 选项 x 
安之 得 于 本 机 
去 全 论著 - Internet 区 城 x 
一 个 区 城 以 本 看 或 更 改 灾 全 设 时 下 
@ $$ Vv Oe ThiveX 入 和 
WE +e ues wml 园 天 众 四 
nanet 点 口 册 用 ( 安 半 ) 
口 再 示 
TEA 的 AdtiveX 近 生 
Intemet 国 
@ a Re , 但 不 这 用 于 下 有 信和 0 
oer 〇 忆 用 Ff 安全 
和 和民 区域 和 列 土 的 网 泪 , 全 乓 0 
国 z 济 Aaivex 这 
六 区 才 的 安全 而 () On 
这 区 的 允 许昌 中 到 度 加 启用 
中 高 国 4 淖 scriptet 
“适用 村 大 作 数 网 站 © 
加 在 下 驼 基 在 内 丰 去 全 内 容 之 前 提 地 OO 
不 相生 的 hctveX 控 禾 OF 
国 区 许 运 行 以 藤 示 便 用 的 ActiveX 注 从 而 不 得 示 
加 基 用 
避 用 屏 护 模式 ( 整 下 重新 宇 动 A om 
Om fod sy pe 
相 所 有 区 小 于 呈 为 对 你 到 由 | Xe 
本 RN: 号 攻 重 -| 重 当 ( 昌 - 
现 定 | 
El Ba Em 3 























7-100 单 击 【 自 定义 级 别 】 按 钮 7-101 【安全 设置 -Internet 区 域 】 对 话 框 


第 8 章 
不 在 网 页 中 迷路 一 
设计 网 页 中 的 
超 链接 


链接 是 网 页 中 比较 重要 的 部 分 ， 是 各 个 网 页 之 间 相互 跳 转 的 依据 。 网 页 中 常用 
的 链接 形式 包括 文本 链接 、 图 像 链接 、 锚 记 链 接 、 电 子 邮 件 链接 、 空 链接 及 脚本 链 
接 等 。 本 章 主 要 介绍 如 何 创建 网 站 链接 。 
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8.1 超级 链接 


链接 是 网 页 中 极为 重要 的 部 分 。 单 击 文档 中 的 链接 ， 即 可 跳 转 至 相应 的 位 置 。 网 站 中 正 
是 有 了 链接 ， 才 实现 了 在 各 文档 之 间 的 相互 跳 转 ， 进 而 方便 地 查阅 各 种 各 样 的 知识 ， 享 受 网 
络 带 来 的 无 穷 乐趣 。 


8.1.1 链接 的 概念 


链接 也 叫 超级 链接 ， 由 源 端 点 和 目标 端点 两 部 分 组 成 。 通 常 将 开始 位 置 的 端点 称 作 源 端 
点 (或 源 锚 )， 而 将 目标 位 置 的 端点 称 为 目标 端点 (或 目标 锚 )， 链 接 就 是 由 源 端 点 到 目标 端点 的 
一 种 跳 转 。 目 标 端点 可 以 是 任意 的 网 络 资源 。 比 如 ， 它 可 以 是 一 个 页 面 、 一 幅 图 像 、 一 段 声 
音 、 一 段 程序 ， 甚 至 可 以 是 页 面 中 的 某 个 位 置 。 

根据 链接 源 端点 的 不 同 ， 超 级 链接 可 分 为 超 文本 和 超 链接 两 种 。 超 文本 就 是 利用 文本 创 
建 的 超级 链接 。 在 浏览 器 中 ， 超 文本 一 般 显示 为 下 方 带 蓝 色 下 划 线 的 文字 ， 超 链接 是 利用 除 
了 文本 之 外 的 其 他 对 象 所 创建 的 链接 ， 如 图 8-1 所 示 。 

利用 链接 可 以 实现 在 文档 间或 文档 中 的 跳 转 。 可 以 说 ， 浏 览 网 页 就 是 从 一 个 文档 跳 转 到 
另 一 个 文档 ， 从 一 个 位 置 跳 转 到 另 一 个 位 置 ， 从 一 个 网 站 跳 转 到 另 一 个 网 站 的 过 程 ， 而 这 些 
过 程 都 是 通过 链接 来 实现 的 ， 如 图 8-2 所 示 。 
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er RN 
图 8-1 网 站 首页 图 8-2 通过 链接 进行 跳 转 
8.1.2 ”常规 的 链接 
常规 超级 链接 包括 内 部 链接 、 外 部 链接 和 脚本 链接 。 
1. 内 部 链接 


内 部 链接 是 指 目标 端点 位 于 站 点 内 部 的 超级 链接 ， 其 设置 非常 灵活 。 
创建 内 部 链接 的 方法 是 : 选中 准备 设置 超 链接 的 文本 或 图 像 后 ， 在 【属性 】 面 板 的 【 链 
接 】 下 拉 列 表 框 中 输入 要 链接 对 象 的 相对 路 径 即 可 ， 如 图 8-3 所 示 。 
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| 《> mu] | 格式 @) 无 v| 类 | 无 v~| BI 注 注 些 丝 标题 rD) 
锚 css 了 GD) [无 ~| 多 接 (L) |index htn]| v]g 忆 本 加 ga 
| 页 硬性... |] [款项 上 












































图 8-3 ”输入 链接 对 象 的 相对 路 径 
2. 外 部 链接 


外 部 链接 是 指 目标 端点 位 于 其 他 网 站 中 的 超级 链接 。 
创建 外 部 链接 的 方法 是 : 选中 准备 设置 超 链接 的 文本 或 图 像 后 ， 在 【属性 】 面 板 的 【 链 
接 】 文 本 框 中 输入 要 链接 网 页 的 网 址 即 可 ， 如 图 8-4 所 示 。 











BI 江 撕 起 绍 标 题 I| | 
>| 岛 局 目标 多 ~ 


ee N 


8-4 ”输入 链接 网 页 的 网 址 


六 带 柄 否 寻 喇 司 阅 水 一 一 织 卫 千 喇 习 装 让 届 8 小 全 












































3. 脚本 链接 


脚本 链接 是 指 通过 脚本 控制 的 超 链接 。 一 般 情 况 下 ， 脚 本 链接 可 以 用 来 执行 计算 、 表 单 


验证 和 其 他 处 理 。 
创建 脚本 链接 的 方法 是 : 选中 准备 设置 脚本 链接 的 文本 或 图 像 后 ， 在 【属性 】 面 板 的 
【链接 】 文 本 框 中 输入 相应 的 脚本 信息 ， 如 : JavaScript:window.close()， 如 图 8-5 所 示 。 

















尾 人 性 
格式 (F) 无 ~ 类 | 无 ~| BI 注 注 丝 皮 标题 0) | 加 
此 css IDG) | 无 ~| 匀 接 (D) |Tavaseript:vindov close() ”~v| 久 已 目标 (9) 

















[页面 民 性 ..， | 上 列 砖 硕 目 二 





8-5 ”输入 链接 对 象 的 脚本 信息 


8.1.3 ”链接 的 类 型 


根据 链接 的 范围 ， 链 接 可 以 分 为 内 部 链接 和 外 部 链接 两 种 。 内 部 链接 是 指 同一 个 文档 之 
间 的 链接 ， 外 部 链接 是 指 不 同 网 站 文档 之 间 的 链接 。 

根据 建立 链接 的 不 同 对 象 ， 链 接 又 可 以 分 为 文本 链接 和 图 像 链接 两 种 。 浏 览 网 页 时 ， 将 
鼠标 指针 移动 到 文字 上 时 ， 鼠 标 指针 将 变 成 手 形 ， 单 击 文字 就 会 打开 一 个 网 页 ， 这 样 的 链接 


就 是 文本 链接 ， 如 图 8-6 所 示 。 
在 网 页 中 浏览 内 容 时 ， 若 将 鼠标 指针 移动 到 图 像 上 ， 鼠 标 指 针 将 变 成 手 形 ， 单 击 图 片 就 
会 打开 一 个 网 页 ， 这 样 的 链接 就 是 图 片 链 接 ， 如 图 8-7 所 示 。 
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图 8-6 文本 链接 图 8-7 图 片 链接 


8.2 链接 路 径 


一 般 来 说 ，Dreamweaver 允许 使 用 的 链接 路 径 有 3 种 : 绝对 路 径 、 文 档 相 对 路 径 和 根 相 
对 路 径 。 


8.2.1 什么 是 URL 


URL(Uniform Resource Locator) 即 统一 资源 定位 符 ， 它 是 互联 网 上 标准 资源 的 地 址 ， 主 要 


用 于 各 种 WWW 客户 程序 和 服务 器 程序 ， 表 示 一 个 网 页 地 址 。 
URL 由 3 部 分 组 成 : 资源 类 型 、 存 放 资 源 的 主机 域名 、 资 源 文件 名 。 如 图 8-8 所 示 为 网 


址 的 结构 。 
www.baidu.co 


图 8-8 网 址 的 结构 








网 站 的 主页 没有 给 出 文件 名 ， 
以 斜 杠 “/” 结 尾 






8.2.2 ”绝对 路 径 


如 果 在 链接 中 使 用 完整 的 URL 地 址 ， 这 种 链接 路 径 就 称 为 绝对 路 径 。 绝 对 路 径 的 特点 


是 : 路 径 同 链接 的 源 端 点 无 关 。 
例如 ， 要 创建 “我 的 站 点 ”文件 夹 中 的 index.html 文档 的 链接 ， 则 可 以 使 用 绝对 路 径 


“D:\ 我 的 站 点 \index.html”。 


ee— 
Ee 采用 绝对 路 径 有 两 个 缺点 : 一 是 不 利于 测试 ; 二 是 不 利于 移动 站 点 。 


8.2.3 ”相对 路 径 


文档 相对 路 径 是 指 以 当前 文档 所 在 的 位 置 为 起 点 到 被 链接 文档 经 由 的 路 径 。 文 档 相 对 路 
径 可 以 表述 源 端 点 同 目标 端点 之 间 的 相互 位 置 ， 它 同 源 端点 的 位 置 密切 相关 。 

使 用 文档 相对 路 径 有 以 下 3 种 情况 。 

(1) 如 果 链 接 中 源 端点 和 目标 端点 在 同一 目录 下 ， 那 么 在 链接 路 径 中 只 需要 提供 目标 端 
点 的 文件 名 即 可 。 

(2) 如 果 链 接 中 源 端 点 和 目标 端点 不 在 同一 目录 下 ， 则 需要 提供 目录 名 、 前 斜 杠 和 文 
件 名 。 

(3) 如 果 链 接 指 向 的 文档 没有 位 于 当前 目录 的 子 级 目录 中 ， 则 可 利用 “../” 符 号 来 表示 
当前 位 置 的 上 级 目录 。 

采用 相对 路 径 的 特点 是 : 只 要 站 点 的 结构 和 文档 的 位 置 不 变 ， 那 么 链接 就 不 会 出 错 ， 否 
则 链接 就 会 失效 。 在 把 当前 文档 与 处 在 同一 文件 夹 中 的 另 一 文档 链接 ， 或 把 同一 网 站 下 不 同 
文件 夹 中 的 文档 相互 链接 时 ， 就 可 以 使 用 相对 路 径 。 


8.2.4 根 相 对 路 径 


根 相对 路 径 可 以 被 看 作 是 绝对 路 径 和 相对 路 径 之 间 的 一 种 折 中 ， 是 指 从 站 点 根 文件 夹 到 
被 链接 文档 经 由 的 路 径 。 在 这 种 路 径 表 达 式 中 ， 所 有 的 路 径 都 是 从 站 点 的 根 目录 开始 的 ， 同 
源 端点 的 位 置 无 关 ， 通 常用 一 个 斜 线 “/” 来 表示 根 目录 。 
根 相 对 路 径 同 绝对 路 径 非 常 相似 ， 只 是 它 省 去 了 绝对 路 径 中 带 有 协议 地 址 的 


| 
了 提示 
部 分 。 


8.3 创建 超级 链接 的 方法 


在 Dreamweaver CC 中 ， 创 建 超级 链接 的 方法 多 种 多 样 。 下 面 介绍 3 种 创建 超级 链接 的 
方法 。 
8.3.1 案例 1 一 一 使 用 菜单 命令 创建 链接 
在 Dreamweaver CC 中 ， 用 户 可 以 使 用 菜单 命令 创建 超级 链接 。 具 体操 作 步骤 如 下 。 
EDD) 启动 Dreamweaver CC， 选 中 要 创建 超级 链接 的 文本 或 图 像 ， 选 择 【修改 】 一 


【创建 链接 】 命 令 ， 如 图 8-9 所 示 。 
EECRP9 弹出 【选择 文件 】 对 话 框 ， 在 其 中 选择 要 链接 的 目标 文件 ， 如 图 8-10 所 示 。 
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打开 妆 接 页 而 (0). wamaa | [ we |]| ws | 
图 8-9 选择 【创建 链接 】 命 令 


图 8-10 【选择 文件 】 对 话 框 


攻 于 BY 单 击 【确定 】 按 钮 ， 即 可 完成 使 用 菜单 创建 超 链接 的 操作 ， 在 【属性 】 面 板 的 
【链接 】 下 拉 列 表 框 中 可 以 看 到 链接 的 目标 文件 ， 如 图 8-11 所 示 。 
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图 8-11 【属性 】 面板 


8.3.2 ”案例 2 一 一 使 用 【属性 】 面 板 创建 链接 


【属性 】 面 板 中 的 【浏览 文件 】 按 钮 和 【链接 】 下 拉 列 表 框 可 用 于 创建 从 图 像 对 象 或 文 
本 到 其 他 文档 或 文件 的 链接 。 


具体 的 方法 为 : 首先 选择 准备 创建 链接 的 对 象 ， 然 后 在 【属性 】 面 板 的 【链接 】 文 本 杠 
中 输入 准备 链接 的 路 径 ， 如 图 8-12 所 示 ， 这 样 即 可 完成 使 用 【属性 】 面 板 创建 链接 的 操作 。 





无 ~ 














BJ 湛江 丝 经 标题 T) 
“BD BG) 
厂 页 而 二 性 .. | 膨大 是 下 








https://mew. bai da com/ 























图 8-12 输入 链接 路 径 
8.3.3 案例 3 一 一 使 用 【指向 文件 】 按 钮 创建 链接 


利用 【 属性】 面板 中 的 【指向 文件 】 按 钮 也 可 以 创建 超 链接 ， 具 体 的 方法 为 : 首先 选择 
准备 创建 链接 的 对 象 ， 然 后 在 【 属性】 面板 中 ， 在 【指向 文件 】 按 钮 上 按 住 鼠标 左 键 ， 并 将 


其 拖 动 到 站 点 窗口 中 的 目标 文件 上 ， 再 释放 鼠标 左 键 ， 这 样 即 可 完成 创建 链接 的 操作 ， 如 
图 8-13 所 示 。 
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曾 * BE re in jee 
oD 接 t] 再 让 这 中 Pp: CE 


| < > 
ROO 1 修志 地 而且 寅 中 ,总 并 14382 和 天 




















图 8-13 使 用 【指向 文件 】 按 钮 创建 链接 


8.4 创建 不 同 种 类 的 网 页 超 链接 
Intemet 之 所 以 越 来 越 受 欢迎 ， 很 大 程度 上 是 因为 在 网 页 中 使 用 了 链接 。 
8.4.1 案例 4 一 一 添加 文本 链接 


通过 Dreamweaver， 可 以 使 用 多 种 方法 来 创建 内 部 链接 。 使 用 【属性 】 面 板 创建 网 站 内 
文本 链接 的 具体 操作 步骤 如 下 。 
ED 启动 Dreamweaver CC， 打 开 素材 中 的 ch08\index.html 文件 ， 选 定 “ 关 于 我 1 
这 几 个 字 ， 将 其 作为 建立 链接 的 文本 ， 如 图 8-14 所 示 。 
EEJ29 单 击 【 属 性 】 面 板 中 的 【浏览 文件 】 按 钮 局 ， 弹 出 【选择 文件 】 对 话 框 ， 选 择 
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图 8-14 选 定 文本 图 8-15 【选择 文件 】 对 话 框 


Sn 在 【属性 】 面 板 中 直接 输入 链接 地 址 也 可 以 创建 链接 。 其 方法 是 ， 选 定 文本 后 选 
SS 择 【 窗 口 ] ~ 【属性 】 命 令 ， 打 开 【 届 性】 面板 ， 然 后 在 【链接 】 下 拉 列 表 框 中 直接 
输入 链接 文件 名 “关于 我 们 .html” 即 可 . 


EEJS 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 添加 的 文本 链接 效果 ， 如 图 8-16 所 示 。 
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图 8-16 ”预览 网 页 
8.4.2 ”案例 5 一 一 添加 图 像 链接 


使 用 【属性 】 面 板 创建 图 像 链接 的 具体 操作 步骤 如 下 。 

EC 打开 素材 中 的 ch08\index.html 文件 ， 选 定 要 创建 链接 的 图 像 ， 然 后 单 击 【 属 
性 】 面 板 中 的 【浏览 文件 】 按 钮 回 ， 如 图 8-17 所 示 。 

ECDRP9 弹出 【选择 文件 】 对 话 框 ， 浏 览 并 选择 一 个 文件 ， 在 【相对 于 】 下 拉 列 表 框 中 
选择 【文档 】 选 项 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 8-18 所 示 。 
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图 8-17 选 定 图 像 8-18 【选择 文件 】 对 话 框 


EECJRB 在 【属性 】 面 板 的 【目标 】 下 拉 列 表 框 中 ， 选 择 链接 文档 打开 的 方式 ， 然 后 在 
【 蔡 换 】 文 本 框 中 输入 图 像 的 蔡 换 文本 “美丽 风光 !”， 如 图 8-19 所 示 。 
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DOV 原 给 jg 已 
图 8-19 【属性 】 面 板 
了 提示 与 文本 链接 一 样 ， 也 可 以 通过 直接 输入 链接 地 址 的 方法 来 创建 图 像 链 接 。 
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8.4.3 ”案例 6 一 一 创建 外 部 链接 


创建 外 部 链接 是 指 将 网 页 中 的 文字 或 图 像 ， 与 站 点 外 的 文档 ， 或 与 Internet 上 的 网 站 


相连 接 。 


Sm 创建 外 部 链接 (从 一 个 网 站 的 网 页 链接 到 另 一 个 网 站 的 网 页 ) 时 ， 必 须 使 用 绝对 路 


了 提示 
SN。 径 ， 即 被 链接 文档 的 完整 URL 要 包括 所 使 用 的 传输 协议 (对 于 网 页 通常 是 http-1。 


比如 ， 在 主页 上 添加 网 易 、 搜 狐 等 网 站 的 图 标 ， 将 它们 与 相应 的 网 站 链接 起 来 。 


EC 打开 素材 中 的 ch08\index_1.html 文件 ， 选 定 百度 网 站 图 标 ， 在 【属性 】 面 板 的 


【链接 】 文 本 框 中 输入 百度 的 网 址 “http://www.baidu.com”， 如 图 8-20 所 示 。 


EC 保存 网 页 后 按 F12 键 ， 在 浏览 器 中 将 网 页 打开 ， 单 击 创建 的 图 像 链 接 ， 即 可 打 


开 百 度 网 站 首页 ， 如 图 8-21 所 示 。 
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图 8-20 ”设置 链接 网 址 图 8-21 ”预览 网 页 


8.4.4 案例 7 一 一 创建 锚 记 链接 


创建 命名 锚 记 (简称 锚 点 ) 就 是 在 文档 的 指定 位 置 设置 标记 ， 给 该 标记 一 个 名 称 以 便 引 用 。 
通过 创建 锚 点 ， 可 以 使 链接 指向 当前 文档 或 不 同文 档 中 的 指定 位 置 。 

打开 素材 中 的 ch08\index.html 文件 ， 切 换 到 代码 视图 中 ， 如 图 8-22 所 示 。 

ECEJRP9 将 光标 放置 到 要 命名 锚 记 的 位 置 ， 或 选中 要 为 其 命名 锚 记 的 文本 ， 这 里 定位 在 
<body> 标 签 后 ， 输 入 “<a name="top"></a> "代码 ， 其 中 锚 记名 称 为 ttp， 如 图 8-23 所 示 。 
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图 8-22 代码 视图 图 8-23 添加 命名 锚 记 
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返回 到 设计 视图 ， 此 时 即 可 在 文档 窗口 中 看 到 错 记 标记 矶 ， 如 图 8-24 所 示 。 

















8-24 ”查看 新 添加 的 锚 记 


在 一 篇 文档 中 ， 锚 记名 称 是 唯一 的 ， 不 允许 在 同一 篇 文档 中 出 现 相同 的 锚 记 名 
SN。 称 。 锚 记名 称 中 不 能 含有 空格 ， 而 且 不 应 该 置 于 层 内 。 锚 记名 称 区 分 大 小 写 。 
在 文档 中 定义 了 锚 记 后 ， 只 做 好 了 链接 的 一 半 任 务 ， 要 链接 到 文档 中 锚 记 所 在 的 位 置 ， 
还 必须 创建 锚 记 链接 。 
具体 操作 步骤 如 下 。 
EEC》 在 文档 的 底部 输入 文本 “返回 项 部 ”并 将 其 选 定 ， 作 为 链接 的 文字 ， 如 图 8-25 
所 示 。 





8-25” 选 定 链接 的 文字 


EEC 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 一 个 字符 符号 “#” 和 锚 记 名 称 。 例 
如 ， nn Top 的 锚 记 ， 则 输入 #ITop， 如 图 8-26 所 示 。 
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8-26 ”设置 链接 


若 要 链接 到 同一 文件 夹 内 其 他 文档 (如 main.html) 中 名 为 top 的 锚 记 ， 则 应 输入 
”mainhtml#top。 同 样 ， 也 可 以 使 用 【属性 】〗 面 板 中 的 【指向 文件 】〗 按 钮 来 创建 锚 记 链 
接 。 单 击 【属性 】 面 板 中 的 【指向 文件 】 按 钮 饼 ， 然 后 将 其 拖 旨 至 要 链接 到 的 锚 记 
(可 以 是 同一 文档 中 的 锚 记 ， 也 可 以 是 其 他 打开 文档 中 的 锚 记 ) 上 即 可 。 


EEIRS9 保存 文档 ， 按 F12 键 在 浏览 器 中 将 网 页 打开 ， 然 后 单 击 网 页 底部 的 “返回 顶 
部 ”4 个 字 ， 如 图 8-27 所 示 。 
EC 在 浏览 器 的 网 页 中 ， 原 输入 文档 的 第 1 行 就 会 出 现在 页 面 项 部， 如 图 8-28 所 示 。 
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图 8-27 ”预览 网 页 图 8-28 返回 页 面 顶部 


8.4.5 “案例 8 一 一 创建 图 像 热点 链接 


在 网 页 中 ， 不 但 可 以 单 击 整 幅 图 像 跳 转 到 链接 文档 ， 也 可 以 单 击 图 像 中 的 不 同 区 域 而 跳 
转 到 不 同 的 链接 文档 。 通 常 将 处 于 一 幅 图 像 上 的 多 个 链接 区 域 称 为 热点 。 热 点 工具 有 3 种 : 
矩形 热点 工具 、 椭 圆 形 热点 工具 和 多 边 形 热点 工具 。 

下 面 通过 实例 介绍 创建 图 像 热点 链接 的 具体 操作 步骤 。 

打开 素材 中 的 ch08\index.html 文件 ， 选 中 其 中 的 图 像 ， 如 图 8-29 所 示 。 

EEJ29 单 击 【属性 】 面 板 中 相应 的 热点 工具 ， 这 里 选择 矩形 热点 工具 已 ， 然 后 在 图 像 

上 需要 创建 热点 的 位 置 拖 动 鼠标 ， 创 建 热点 ， 如 图 8-30 所 示 。 
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TD 


EEC 
图 8-29 选 定 图 像 图 8-30 ”绘制 图 像 热点 


EEC 在 【属性 】 面 板 的 【链接 】 文本 框 中 输入 链接 的 文件 ， 即 可 创建 一 个 图 像 热 点 
链接 ， 如 图 8-31 所 示 。 
EC 用 step 01 一 03 的 方法 创建 其 他 热点 链接 ， 单 击 【 属 性 】 面 板 上 的 指针 热点 工具 


上 ， 将 鼠标 指针 恢复 为 标准 箭头 状态 ， 即 可 在 图 像 上 选取 热点 。 
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属性 
图 热点 甸 接 0 /Docwments/ 未 命名 泪 点 2/1 jpe 已 
目标 区 ~ 
lim | 
NA DOV 








8-31 ”输入 链接 文件 


| 被 选中 的 热点 边框 上 将 会 出 现 控 点 ， 拖 动 控 点 可 以 改变 热点 的 形状 。 选 中 热点 
鲜 后 ， 按 Delete 键 可 以 删除 热点 。 可 以 在 【属性 】 面 板 中 设置 热点 相对 应 的 URL 链接 
地 址 。 


NN 8.4.6 ”案例 9 一 一 创建 电子 邮件 链接 


电子 邮件 链接 是 一 种 特殊 的 链接 ， 单 击 这 种 链接 ， 会 启动 计算 机 中 相应 的 E-mail 程序 ， 
允许 书写 电子 邮件 ， 然 后 发 往 链接 中 指定 的 邮箱 地 址 。 
创建 电子 邮件 链接 的 具体 操作 步骤 如 下 。 
EC 打开 需要 创建 电子 邮件 链接 的 文档 。 将 光标 置 于 文档 窗口 中 要 显示 电子 邮件 链 
接 的 地 方 (这 里 选择 页 面 底部 )， 选 中 即将 显示 为 电子 邮件 链接 的 文本 或 图 像 ， 然 后 选 
择 【 插 入 】 一 【电子 邮件 链接 】 命 令 ， 如 图 8-32 所 示 。 


mE 在 【插入 】 面 板 的 【常用 了 选项 卡 中 单 击 【电子 邮件 链接 】 按 钮 也 可 以 打开 【 电 


鲸 。 子 邮 件 链接 〗】 对 话 框 ， 如 图 8-33 所 示 。 















镍 入 
备用 
ER pz， 让 (Oo S(O wels) 回 mr 
| Div(D) 家 mL5 Vide 
HTMLS Video(V) Ctrl+Alt+Shift+V 回 画布 
| 画布 (A) 回 -图像 
| 0) > 目 阁 
| 束 司 (D) Ce+Ak+T -eu 
Head(H) 》 
脚本 (S) 全 
Hyperlink(p) 有。 mperlink 
HR [SA 
水 拉线 加 要 水 T 线 
图 8-32 选择 【电子 邮件 链接 】 命 令 8-33 【常用 】 选 项 卡 


EEDD9 在 弹出 的 【电子 邮件 链接 】 对 话 框 的 【文本 】 文 本 框 中 ， 输 入 或 编辑 作为 电子 
邮件 链接 显示 在 文档 中 的 文本 ， 在 【电子 邮件 】 文 本 框 中 输入 邮件 送 达 的 E-mail 地 
址 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 8-34 所 示 。 


人 同样 ， 也 可 以 利用 【属性 了 面板 创建 电子 邮件 链接 。 其 方法 是 : 选中 即将 显示 为 
站 电子 邮件 链接 的 文本 或 图 像 ， 在 【属性 了 面板 的 【链接 】 文 本 框 中 输入 
“mailto:liule2012@163.com” ， 如 图 8-35 所 示 。 
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电子 邮件 链接 x 

x | | ED 
电子 邮件 :Inailto; liule2012@163. comj ~ dd 

者 助 

图 8-34 【电子 邮件 链接 】 对 话 框 图 8-35 输入 链接 地 址 
Gd 为- 户 - OO x 
-了 提示 电子 邮件 地 址 的 格式 为 : 用 户 @ Br -oS " @ 

外 名 @ 主 机 名 (服务 器 提供 商 )。 在 Cs 


【 属性】 面板 的 【链接 〗 下 拉 列 表 
框 中 输入 电子 邮件 地 址 时 ， 
“mailto:” 与 电子 邮件 地 址 之 间 不 
能 出 现 空格 (比如 正确 的 格式 为 
mailto:liule2012@163.com). 


区 于 BY 保存 文档 ， 按 F12 键 在 IE 浏览 
器 中 预览 ， 可 以 看 到 电子 邮件 链接 
的 效果 ， 如 图 8-36 所 示 。 


8.4.7 案例 10 一 一 创建 下 载 文 件 的 链接 


下 载 文件 的 链接 在 软件 下 载 网 站 或 源 代码 下 载 网 站 中 应 用 得 较 多 。 其 创建 的 方法 与 一 般 
链接 的 创建 方法 相同 ， 只 是 所 链接 的 内 容 不 是 文字 或 网 页 ， 而 是 一 个 软件 。 

创建 下 载 文件 链接 的 具体 操作 步骤 如 下 。 

EEDp 打开 需要 创建 下 载 文件 链接 的 文档 文件 ， 选 中 要 设置 为 下 载 文件 的 链接 的 文 
本 ， 然 后 单 击 【 属 性 】 面 板 中 【链接 】 下 拉 列 表 框 右边 的 【浏览 文件 】 按 钮 回 ， 如 
图 8-37 所 示 。 

本 TB 打开 【选择 文件 】 对 话 框 ， 选 择 要 链接 的 下 载 文件 ， 比 如 “酒店 常识 .ttt” 文 
件 ， 然 后 单 击 【确定 】 按 钮 ， 即 可 创建 下 载 文件 的 链接 ， 如 图 8-38 所 示 。 














FRR 
PT pp RE 汪 2 天 x 


IE IE Wh Te A RN i ; 
“酒店 介绍 。 ， 好 筑 玫 点 。 加 入 会员， If 


























下 画 大 sm: 09 /4 Wicd na 


8-37 ”选择 文本 8-38 【选择 文件 】 对 话 框 








阅 玉 酌 否 壬 凡 习 于 水 一 一 职 卫 壬 喇 习 午 让 者 8 小 全 
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8.4.8 ”案例 11 一 一 创建 空 链接 tt 


BIE EE 2 
-3 





所 谓 空 链接 ， 是 指 没有 目标 端点 的 链接 。 
利用 空 链接 可 以 激活 文档 中 链接 对 应 的 对 象 和 
文本 。 一 旦 对 象 或 文本 被 激活 ， 就 可 以 为 之 添 
加 一 个 行为 ， 以 实现 当 光 标 移动 到 链接 上 时 ， 
进行 切换 图 像 或 显示 分 层 等 动作 。 创 建 空 链接 
的 具体 操作 步骤 如 下 。 

区 了 TY 在 文档 窗口 中 ， 选 中 要 设置 为 空 

链接 的 文本 或 图 像 ， 如 图 8-39 所 示 。 

EEJPp 打开 【属性 】 面 板 ， 然 后 在 【 链 

接 】 文 本 框 中 输入 一 个 “#” 号 ， 即 
可 创建 空 链接 ， 如 图 8-40 所 示 。 











属性 
BE 图 像 ，92K Sre [slide-600x300 jpe DD ess slideinfo ~| 殉 D) px v 门 
m 搓 六 DD DD 二 国 六 本 寺中 A 高 WW mx- 9 
地 图 0 目标 (R) ~ 
INIDDS 原始 GD 
8-40 输入 # 号 


8.4.9 案例 12 一 一 创建 脚本 链接 


脚本 链接 是 另 一 种 特殊 类 型 的 链接 。 通 过 单 击 带 有 脚本 链接 的 文本 或 对 象 ， 可 以 运行 相 
应 的 脚本 及 函数 (JavaScript 和 VBScript 等 )， 从 而 为 浏览 者 提供 许多 附加 的 信息 。 脚 本 链接 还 
可 以 被 用 来 确认 表单 。 创 建 脚本 链接 的 具体 操作 步骤 如 下 。 
EC 打开 需要 创建 脚本 链接 的 文档 ， 选 择 要 创建 脚本 链接 的 文本 、 图 像 或 其 他 对 
象 ， 这 里 选中 文本 “酒店 加 盟 ”， 如 图 8-41 所 示 。 


er x 
ES hne eee tle eee iongre ere print 
| ft | 后 分 [ 久 H] 间 搜 图 。 哆 . 区 地 


加 关于 我 们 | 酒店 介绍 | 世 3 湘 店 但 入 | 四 会 员 合 




















8-41 选择 文本 


EEDpy 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “JavaScript ”， 接 着 输入 相应 的 
JavaScript 代码 或 函数 ， 比 如 输入 “window.close0”， 表 示 关 闭 当前 窗口 ， 如 图 8-42 


所 示 。 








[> mL| ”格式 @) [无 ~ 类 nargin ~ BI 汪 江 经 经 标题 rm) | 
肋 css Ia bog ~ 构 接 四 Javaseript: window closeO 目标 (9) 


页 面 属性 列表 项 目 





























图 8-42 输入 脚本 代码 
es 
A 在 代码 JavaScript:window.close 0 中 ， 括 号 内 不 能 有 空格 。 
EEJRBp 保存 网 页 ， 按 F12 键 在 正 浏览 器 中 将 网 页 打开 ， 效 果 如 图 8-43 所 示 。 单 击 创 


建 的 脚本 链接 文本 ， 会 弹出 一 个 对 话 框 ， 单 击 【是 】 按 钮 ， 将 关闭 当前 窗口 ， 如 
图 8-44 所 示 。 





- 0O x 


€ 部 fieyWcyuseryqianewpo -年 nde 





诡 伯 站” 坑 术 | 旧 ” 室 和 V】 机 六 ) 工具 (Tm 视 和 0 
关于 我 们 | | 酒店 登入 | 会 员 登 录 | 酒店 加 蛙 网 


Windows Internet Explorer 
你 呈 各 十。 二 有 有。 加 入 了 网站。 6) 











你 查看 的 网 页 下 在 试图 关闭 选项 卡 。 
是 否 关闭 此 选项 卡 ? 
一 
图 8-43 ”预览 网 页 图 8-44 ”提示 信息 框 


| JPG 格式 的 图 片 不 支持 脚本 链接 ， 如 果 要 为 图 像 添加 脚本 链接 ， 则 应 先 将 图 像 转 
汇 换 为 GIF 格式 。 


8.5 ”综合 案例 一 一 为 企业 网 站 添加 友情 链接 


使 用 链接 功能 可 以 为 企业 网 站 添加 友情 链接 。 有 具体 
操作 步骤 如 下 。 | 
EI 打开 素材 中 的 ch08\index.html 文件 。 在 页 A 
面 底部 输入 需要 添加 的 友情 链接 名 称 ， 如 图 8-45 mem ce nD 人 vn 


返回 项 部 




















所 示 。 [| 格式 @) 无 “ En 
EUDy 这 里 选中 “百度 ”文字 ， 在 下 方 的 【 属 。 EE 
性 】 面 板 中 的 【链接 】 下 拉 列 表 框 中 输入 图 8-45 输入 友情 链接 文本 








六 及 至 五 阅 半 小 一 过 代 于 沼 吾 HH 夫 8 江 要 
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“www.baidu.com”， 如 图 8-46 所 示 。 


























[<> mL] 格式 中) | 无 了 类 links ~ BI 注 泣 丝 些 标题 D) 
男 css DD 无 > 摘 接 器 ww baidu cm 7 全 口 。 目标 @ 
页 面 属性 . .- 列表 项 目 .|} 














8-46 ”添加 链接 地 址 


EC 重复 step 02 的 操作 ， 选 中 其 他 文字 ， 并 为 这 些 文件 添加 链接 ， 如 图 8-47 所 示 。 
EC 保存 文 要 ， 按 F12 键 在 IE 浏览 器 中 预览 效果 ， 单 击 其 中 的 链接 ， 即 可 打开 相应 
的 网 页 ， 如 图 8-48 所 示 。 





[¢ ET - 男 ayoe 
RE 
生 





属性 
《> mm.| ”格式 (8) 无 | links 一 
区 css ze) 大 [ww souha com 




















友信: | | 
< 








图 8-47 添加 其 他 文本 的 链接 地 址 图 8-48 ”预览 网 页 


8.6 疑难 解 惑 


疑问 1: 如 何在 Dreamweaver 中 去 除 网 页 中 链接 文字 下 面 的 下 划 线 ? 


答 : 在 完成 网 页 中 的 链接 制作 之 后 ， 系 统 往往 会 自动 在 链接 文字 的 下 面 添加 一 条 下 划 
线 ， 用 来 标示 该 内 容 包 含 超级 链接 。 当 一 个 网 页 中 的 链接 较 多 时 ， 就 会 显得 杂乱 ， 因 此 有 时 
就 需要 去 除 超 级 链接 。 其 具体 操作 方法 是 ， 在 设置 页 面 属性 中 【链接 】 选 项 卡 下 的 【水 平 线 
样式 】 下 拉 列 表 中 ， 选 择 【 始 终 无 下 划 线 】 选 项 ， 即 可 去 除 网 页 中 链接 文字 下 面 的 下 划 线 。 
疑问 2: 在 为 图 像 设置 热点 链接 时 ， 为 什么 之 前 为 图 像 设置 的 普通 链接 无 法 使 用 呢 ? 


答 : 一 张 图 像 只 能 选择 创建 普通 链接 或 热点 链接 。 如 果 同 一 张 图 像 在 创建 了 普通 链接 后 
再 创建 热点 链接 ， 则 普通 链接 会 无 效 ， 只 有 热点 链接 是 有 效 的 。 
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第 9 章 

让 网 页 互动 起 来 
一 一 使 用 网 页 
表单 和 行为 


很 多 网 站 都 有 申请 注册 会 员 或 邮箱 的 模块 ， 这 些 模块 都 是 通过 添加 网 页 表单 来 
完成 的 。 另 外 ， 设 计 人 员 在 设计 网 页 时 ， 需 要 使 用 编程 语言 实现 一 些 动作 ， 比 如 打 
开 浏 览 器 窗口 、 验 证 表单 等 ， 这 些 就 是 网 页 行为 。 本 章 主要 介绍 如 何 使 用 网 页 表单 
和 行为 。 
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9.1 认识 表单 


表单 是 网 页 中 的 重要 组 成 部 分 。 在 网 页 中 使 用 表单 之 前 ， 首 先 应 该 了 解 什么 是 表单 、 表 
单 对 象 有 哪些 、 插 入 表单 以 及 设置 表单 属性 等 内 容 。 


9.1.1 什么 是 表单 


表单 在 网 页 中 的 主要 功能 是 数据 采集 ， 实 现 浏览 者 与 服务 器 之 间 的 信息 传递 。 它 通常 由 文 
本 框 、 下 拉 列 表 框 、 复 选 框 、 按 钮 等 表单 对 象 组 成 。 图 9-1 所 示 为 一 个 网 页 的 用 户 注册 页 面 。 


全 


ga INTERNATIONAL 
设 天 机 加 cusroums 


图 9-1 网 页 用 户 注册 页 面 


另外 ， 一 个 表单 有 3 个 基本 组 成 部 分 ， 包 括 表 单 标签 、 表 单 域 和 表单 按钮 。 

(1) 表单 标签 。 表 单 标签 为 <form></form>， 在 这 对 标签 中 包含 了 处 理 表单 数据 所 用 CGI 
程序 的 URL 以 及 数据 提交 到 服务 器 的 方法 。 

(2) 表单 域 。 表 单 域 包括 文本 框 、 密 码 框 、 隐 藏 框 、 多 行文 本 框 、 复 选 框 、 单 选 按钮 、 
下 拉 列 表 框 和 文本 上 传 框 等 对 象 。 

(3) 表单 按钮 。 表 单 按钮 包括 提交 按钮 、 复 位 按钮 和 一 般 按 钮 ， 用 于 将 数据 传送 到 服务 
器 上 或 者 取消 输入 等 。 


9.1.2 ”认识 表单 对 象 


表单 是 放置 表单 对 象 的 容器 ， 要 使 表单 具有 真正 的 意义 ， 就 离 不 开 表 单 对 象 ， 因 此 表单 
与 表单 对 象 是 一 个 整体 。 下 面 介绍 常见 的 表单 对 象 。 

1. 文本 字段 

文本 字段 可 以 输入 任意 类 型 的 文本 信息 ， 是 表单 应 用 较 多 的 表单 对 象 之 一 。 图 9-2 所 示 
为 一 个 注册 页 面 ， 其 中 用 户 名 、 手 机 号 和 验证 码 右 侧 的 文本 框 就 是 文本 字段 表单 对 象 在 网 页 





中 的 体现 。 
2. 密码 框 


密码 框 是 文本 字段 的 特殊 形式 ， 该 文本 框 中 的 文本 信息 不 会 以 明文 的 方式 显示 出 来 。 如 
图 9-3 所 示 ， 这 是 一 个 网 页 的 用 户 登 录 页 面 ， 其 中 锁 图 标 右 侧 的 文本 框 就 是 密码 框 表单 对 象 
在 网 页 中 的 体现 。 


天 天 开心 





+ 冯 证 骨 ， | 各 要 殉职 各 证 到 


再 入 如 术 到 96 本 怒 证 入 ， 蚂 证 罗 24 小 村 有 下 
"性 别 : @ 男 。” D 〇 女 


同意 协议 并 注册 


人 汽车 之 家 用 户 限 全 用 协议 











图 9-2 文本 字段 图 9-3 密码 框 


3. 文本 区 域 

文本 区 域 和 文本 字段 一 样 ， 可 以 输入 任意 类 型 的 文本 信息 ， 只 不 过 文本 区 域 可 以 设置 行 
数 与 列表 ， 而 文本 字段 不 可 以 。 图 9-4 所 示 为 一 个 网 页 中 的 在 线 留 言 页 面 ， 其 中 【留言 】 右 
侧 的 区 域 就 是 文本 区 域 表单 对 象 在 网 页 中 的 体现 ， 用 户 可 以 在 该 区 域 输入 多 行文 本 内 容 。 

4. 单 选 按钮 

单 选 按钮 在 同一 组 选项 中 只 能 选择 一 个 选项 ， 如 性 别 男 和 女 只 能 选择 一 个 。 图 9-5 所 示 为 
一 个 网 页 的 留言 本 页 面 ， 其 中 【性 别 】 右 侧 的 单 选 按钮 就 是 单 选 按钮 表单 对 象 在 网 页 中 的 体现 。 





+* 姓 名: | 请 条 入 他 9 性 名 留言 本 标题 
a OF Ol Oi OF Sngik 
-全 
可 pi 
留言 : 
人 名 
性 OC 
提交 下 aa 
图 9-4 文本 区 域 图 9-5 单 选 按钮 
5. 复 选 框 


复 选 框 在 同一 组 选项 中 可 以 同时 选择 多 个 选项 。 如 图 9-6 所 示 ，【 兴 趣 标签 】 右 侧 的 控 
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件 就 是 复 选 框 表单 对 象 在 网 页 中 的 体现 ， 用 户 可 以 选择 多 个 兴趣 对 象 。 
6. 选择 控件 
选择 控件 可 以 让 浏览 者 通过 列表 和 菜单 提供 的 选项 来 选择 合适 的 数据 。 图 9-7 所 示 为 一 


个 网 页 的 商品 发 布 页 面 ， 通 过 单 击 【订单 类 型 】 右 侧 的 下 三 角 按钮 ， 在 弹出 的 下 拉 列 表 中 可 
以 选择 合适 的 类 型 ， 这 就 是 选择 控件 表单 对 象 在 网 页 中 的 体现 。 


WHE: he 、 膏 汪 我 [7 同 芭 转世 素 
宁 音 站 坊 ， 等 付 和 - 计 W 人 站 :全 部 
手机 注册 邮箱 注册 
和 Wanh: [2m 
订单 夹 型 E32 
(加 ) OH 站 
x 使 用 疯 博 帐号 直 按 芋 东 i 
eid 到 宁 林 单 
口 财经 网 风向 加 汽车 口 房 回 生活 i 
bon nA 三 个 月 前 [J 单 
"MER: ERA -ai i 
dr MT 单 
po ey ee 
[ee i 
图 9-6 复 选 框 图 9-7 选择 控件 
7. 按钮 


按钮 可 用 于 提交 或 者 重 置 表单 元 素 ， 通 过 按钮 可 以 触发 某 种 行为 或 事件 。 图 9-8 所 示 为 
一 个 留言 本 页 面 ， 其 中 下 方 的 两 个 按钮 就 是 按钮 表单 对 象 在 网 页 中 的 体现 。 


8. 图 像 按钮 


图 像 按 钮 和 网 页 中 默认 的 按钮 功能 一 样 ， 只 不 过 图 像 按钮 显示 得 更 加 直观 ， 视 觉 冲 击 力 
较 强 。 图 9-9 所 示 为 一 个 网 页 中 的 登录 区 域 ， 其 中 【登录 】 按 钮 就 是 一 个 图 像 按钮 。 


者 本 嫩 录 更 安全 | 
是 





密码 登录 





Omssa QaHsea 


忘记 窗 码 ”免费 注册 





9-9 图像 按钮 


9. 文件 域 
文件 域 的 作用 是 让 浏览 者 浏览 本 地 文件 ， 并 将 其 作为 表单 数据 进行 上 传 。 图 9-10 所 示 为 


一 个 留言 本 页 面 ， 其 中 【上 传 照片 】 右 侧 的 内 容 就 是 文件 域 表单 对 象 在 网 页 中 的 体现 。 
10. 电子 邮件 控件 


电子 邮件 控件 是 用 于 让 浏览 者 输入 正确 的 电子 邮箱 地 址 的 。 图 9-11 所 示 为 一 个 网 页 中 的 
用 户 注册 区 域 ， 其 中 【邮箱 】 右 侧 的 文本 框 就 是 电子 邮件 控件 表单 对 象 在 网 页 中 的 体现 ， 提 
示 用 户 输入 正确 的 邮箱 地 址 。 


再 坟 入 一 过 所 上 下 给 入 的 十 汉 


各 二 丰 机 (于 六 不 要 全 用 新 廊 和 失 罗 好 入 ) 











图 9-10 文件 域 图 9-11 电子 邮件 控件 


9.1.3 ”案例 1 一 一 插入 表单 


在 网 页 中 插入 表单 的 方法 很 简单 ， 可 以 通过 【插入 】 菜 单 命 令 来 插入 ， 也 可 以 通过 【 插 
入 】 面 板 来 插入 。 
在 文档 中 插入 表单 的 具体 操作 步骤 如 下 。 
EC 将 光标 放置 在 要 插入 表单 的 位 置 ， 选 择 【 插 入 】 一 【表单 】 一 【表单 】 命 令 ， 
如 图 9-12 所 示 。 


Se 要 插入 表单 域 ， 也 可 以 在 【插入 】〗 面 板 的 【表单 〗 选 项 卡 中 单 击 【 表 单 〗 按 钮 。 
BD 


EECDPy 插入 表单 后 ， 页 面 上 会 出 现 一 条 红色 的 虚线 ， 如 图 9-13 所 示 。 这 就 是 在 设计 视 
图 中 查看 到 的 添加 的 表单 效果 。 


ex， ro es sels En wo 
om) 





函 unaued- 三 百 贡 























| ayFKEerssEoraly 画 419 x 251v 
9-12 ”选择 【表单 】 命 令 图 9-13 ”插入 的 表单 域 
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表单 在 浏览 页 面 时 是 不 会 显示 出 来 的 ， 即 不 可 见 。 


9.1.4 案例 2 一 一 设置 表单 属性 


表单 在 网 页 中 有 很 重要 的 作用 ， 因 此 对 其 属性 的 设置 也 就 显得 格外 重要 与 谨慎 了 。 在 网 
页 中 插入 表单 后 ， 选 中 插入 的 表单 ， 或 在 标签 选择 器 中 选择 Kform#forml9 标 签 ， 即 可 在 表单 的 
【属性 】 面 板 中 设置 属性 ， 如 图 9-14 所 示 。 
























































口 wovaldate | J 守 匡 | 四 





图 9-14 【属性 】 面 板 


表单 的 常用 属性 有 如 下 几 种 。 

(1) ID: 为 指定 表单 ID 编号 ， 一 般 被 程序 或 脚本 所 用 。 

(2) Class: 为 表单 添加 样式 。 

(3) Action: 为 表单 指定 处 理 数 据 的 路 径 。 

(4) Method: 为 表单 指定 将 数据 传输 到 服务 器 的 方法 ， 包 括 默认 、POST 和 GET 三 种 方 
法 ， 其 中 GET 方法 将 值 附加 到 请 求 该 页 面 的 URL 中 ; POST 方法 将 在 HTTP 请 求 中 嵌入 表 
单数 据 ， 默 认 方 法 使 用 浏览 器 的 默认 设置 将 表单 数据 发 送 给 服务 器 。 通 常 ， 默 认 方 法 为 GET 
方法 。 

(5) Title: 为 表单 指定 标题 。 

(6) Enctype: 为 表单 指定 传输 数据 时 所 使 用 的 编码 类 型 。 

(7) Target: 为 表单 指定 目标 窗口 的 打开 方式 。 

(8) Accept Charset: 为 表单 指定 字符 集 。 

(9) No Validate: 为 表单 指定 提交 时 是 否 进 行 数据 验证 。 

(10) Auto Complete: 为 表单 指定 是 否 让 浏览 器 自动 记录 之 前 输入 的 信息 。 


和 提交 的 表单 如 果 要 传输 用 户 名 和 密码 、 信 用 卡 或 其 他 敏感 性 信息 ，POST 方法 相 
i EE: 对 于 GET 方法 更 加 安全 。 图 9-15 所 示 为 Method 下 拉 列 表 。 









































9-15 ”Method 下 拉 列 表 


信 156 


9.2 ”常用 表单 对 象 的 应 用 


表单 用 于 把 来 自用 户 的 信息 提交 给 服务 器 ， 是 网 站 管理 者 与 浏览 者 之 间 进 行 沟通 的 桥 
梁 。 利 用 表单 处 理 程序 ， 可 以 收集 、 分 析 用 户 的 反馈 意见 ， 使 网 站 管理 者 对 完善 网 站 建设 做 
出 科学 、 合 理 的 决策 。 因 此 ， 表 单 是 决定 网 站 是 否 成 功 的 重要 因素 。 


9.2.1 案例 3 一 一 插入 文本 域 


文本 域 分 为 单行 文本 域 和 多 行文 本 域 。 下 面 讲解 这 两 种 文本 域 的 插入 方法 。 具 体操 作 步 
又 如 下 。 
EC 将 光标 定位 在 表单 内 ， 在 其 中 插入 一 个 2 行 2 列 的 表格 ， 然 后 输入 文本 内 容 和 
调整 表格 的 大 小 ， 如 图 9-16 所 示 。 
EECRUP9 将 光标 定位 在 表格 第 一 行 右 侧 的 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【 文 
本 】 命 令 ， 如 图 9-17 所 示 。 或 者 在 【插入 】 面 板 的 【表单 】 选 项 卡 中 单 击 【 文 本 】 
按钮 。 
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[ES #ex(MW， tx(0) S$(O 站 上 (9 OW) MOH) 
DiD) 
HTMLS Video(V) Cerl+Alt+Shift+y 
画布 (A) 











网 户 名 称 























olv) CarnsEornty[G3 日 加 画 506 22~ jQuery Mobile() 
图 9-16 插入 表格 图 9-17 选择 【文本 】 命 令 


ES 单行 文本 域 插入 完成 后 ， 在 【属性 】 面 板 中 选中 Required( 必 要 ) 和 Auto Focus( 焦 
点 ) 复 选 框 ， 将 Max Length( 最 多 字符 ) 设 置 为 15， 如 图 9-18 所 示 。 

EEC 将 光标 定位 在 表格 第 二 行 右 侧 的 单元 格 中 ， 选 择 【插入 】 一 【表单 】 一 【文本 
区 域 】 命 令 。 或 者 在 【插入 】 面 板 的 【表单 】 选 项 卡 中 单 击 【文本 区 域 】 按 钮 ， 如 
图 9-19 所 示 。 

EECD) 多 行文 本 域 插入 完成 后 ， 在 【属性 】 面 板 中 设置 Rows( 行 数 ) 为 5， 设置 Cols( 列 ) 
为 350， 如 图 9-20 所 示 。 

EC) 保存 网 页 后 ， 按 Fl12 键 进行 页 面 预览 ， 效 果 如 图 9-21 所 示 。 
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图 9-20 插入 多 行文 本 域 图 9-21 查看 页 面 预览 效果 


9.2.2 案例 4 一 一 插入 密码 域 


密码 域 是 特殊 类 型 的 文本 域 。 当 用 户 在 密码 域 中 输入 文本 信息 时 ， 所 输入 的 文本 会 被 蔡 
换 为 星 号 或 项 目 符号 以 隐藏 该 文本 ， 从 而 保护 这 些 信息 不 被 别人 看 到 。 


插入 密码 域 的 具体 操作 步 又 如 下 。 
EEIDp 打开 “ch0%\ 密 码 域 html” 文 件 ， 将 光标 定位 在 【密码 】 右 侧 的 单元 格 中 ， 如 图 
9-22 所 示 。 


EEJPpp 选择 【插入 】 一 【表单 】 一 【密码 】 命 令 ， 如 图 9-23 所 示 。 或 在 【插入 】 面 板 
的 【表单 】 选 项 卡 中 单 击 【密码 】 按 钮 。 


























ss 
mIN 
jouery Mebieol Ed sa 
5° | 六 站 | 
9-22 ”打开 素材 文件 9-23 ”选择 【密码 】 命 令 


全 15s 


ESTEY 密码 域 插入 完成 后 ， 在 【属性 】 面 板 中 选中 Required( 必 要 ) 复 选 框 ， 将 Max 
Length( 最 多 字符 ) 设 置 为 25， 如 图 9-24 所 示 。 

本 UY 保存 网 页 后 ， 按 F12 键 进行 页 面 预览 ， 当 在 密码 域 中 输入 密码 时 ， 显 示 为 项 目 
符号 ， 如 图 9-25 所 示 。 
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图 9-24 插入 密码 域 图 9-25 查看 页 面 预览 效果 


9.2.3 ”案例 5 一 一 插入 复 选 框 


如 果 要 从 一 组 选项 中 选择 多 个 选项 ， 则 可 使 用 复 选 框 。 可 以 使 用 如 下 两 种 方法 插入 复 选 框 。 
(1) 选择 【插入 】 一 【表单 】 一 【 复 选 框 】 命 令 ， 如 图 9-26 所 示 。 
(2) 单 击 【插入 】 面 板 的 【表单 】 选 项 卡 中 的 【 复 选 框 】 按 钮 ， 如 图 9-27 所 示 。 


ea Wm) wt) 全 9(O nls) GOV wh(H) 

















Div(D) 可 单 (F) 
HTMLS Video(V) Cel+Ak+Shi+V tm 
Yesesd 生子 休 M) 
国 你 () EHP) 
专 桥 人 m) Ctrl+AR+T Un 
人 Tem 和 
Hyperinktp) Fe RT 
ii atG) 加 时 间 
BMD) oi 名。 日 贿 H 间 
a 
IFRAME ww 驴 ”日 其 Bj 间 (当地 ) 
2 MD) 口 站 E 才 
入 构 (S) 对 间 (M) i 
媒体 (MI 
Nei)(O) 国 “提交 " 找 钮 
jouery Mebleg) 六 本 区 地 内 
jauey un SE) 全 “ 重 看 " 投 B 
杭 E( 得 交 革 HHU) 国 文件 
Cs | 
最 近 的 代码 片断 (R) 至 失控 各 中 二 上 隐 区 
0 目 迁 上 
造反 (S) 
六 BR 回 “ 单 选 按钮 
argo) 国 。 单 过 按 和 组 
a EE 网 
图 9-26 选择 【 复 选 框 】 命 令 图 9-27 单 击 【 复 选 框 】 按 钮 


若 要 为 复 选 框 添加 标签 ， 可 在 该 复 选 框 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 图 9-28 
所 示 。 另 外 ， 选 中 复 选 框 号 ， 在 【属性 】 面 板 中 可 以 设置 其 属性 ， 如 图 9-29 所 示 。 
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图 9-28 输入 复 选 框 标签 文 字 图 9-29 复 选 框 属性 面板 


9.2.4 ”案例 6 一 一 插入 单 选 按钮 


如 果 从 一 组 选项 中 只 能 选择 一 个 选项 ， 则 需要 使 用 单 选 按钮 功能 。 选 择 【 插 入 】 一 【 表 
单 】 一 【 单 选 按钮 】 命 令 ， 即 可 插入 单 选 按钮 。 
ze 通过 单 击 【插入 】 面 板 的 【表单 】 选 项 卡 中 的 【 单 选 按钮 】 按 锯 回 ， 也 可 以 插入 
慌 。 单 选 按钮 。 
若 要 为 单 选 按钮 添加 标签 ， 可 在 该 单 选 按钮 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 


图 9-30 所 示 。 选 中 单 选 按 钮 礼 ， 在 【属性 】 面 板 中 可 为 其 设置 属性 ， 如 图 9-31 所 示 。 


请 地 近 个 人 爱好 ， 


日 音乐 日 体育 © 旅游 于 读书 








[@ we es os -eT 
[Dosed Reared | Fom BS el 
Mto Fo 

图 9-30 ”输入 单 选 按钮 标签 文字 图 9-31 单 选 按钮 属性 面板 


9.2.5 ”案例 7 一 一 插入 下 拉 菜 单 


表单 中 有 两 种 类 型 的 菜单 ， 一 种 是 单 击 时 下 拉 的 菜 
单 ， 称 为 下 拉 菜 单 ， 另 一 种 则 显示 为 一 个 有 项 目的 可 深 
动 列 表 ， 用 户 可 从 该 列表 中 选择 项 目 ， 它 被 称 为 滚动 列 
表 ， 如 图 9-32 所 示 分 别 是 下 拉 菜 单 和 滚动 列表 。 
创建 下 拉 菜 单 的 具体 操作 步骤 如 下 。 
ED 选择 【插入 】--【 表 单 】--【 选 择 】 命 
令 ， 即 可 插入 下 拉 菜单 ， 然 后 在 其 【属性 】 面 
板 中 ， 单 击 【 列 表 值 】 按 钮 ， 如 图 9-33 所 示 。 图 332 - 列 家 与 第 间 
ET 在 打开 的 【列表 值 】 对 话 框 中 进行 相应 的 设置 ， 如 图 9-34 所 示 。 
EE> 单 击 【确定 】 按 钮 ， 在 【属性 】 面 板 的 Selected( 初 始 化 时 选 定 ) 列 表 框 中 选择 
【体育 】 选 项 ， 如 图 9-35 所 示 。 
保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 9-36 所 示 。 
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图 9-33 选择 属性 面板 























图 9-35 ”选择 初始 化 时 选 定 的 菜单 


9.2.6 ”案例 8 一 一 插入 滚动 列表 
创建 滚动 列表 的 具体 操作 步骤 如 下 。 


EEC 选择 【插入 】 一 【表单 】 一 【选择 】 命 令 ， 插 入 选择 菜单 ， 然 后 在 其 【属性 】 


面板 中 ， 将 Size 设置 为 3， 如 图 9-37 所 示 。 


图 9-34 【列表 值 】 对 话 框 


- 0O x 
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图 9-36 ”预览 效果 
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9-37 设置 Size 


ECEDRP9 单 击 【列表 值 】 按 钮 ， 在 打开 的 对 话 框 中 进行 相应 的 设置 ， 如 图 9-38 所 示 。 


单 击 【 确 定 】 按 钮 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 9-39 所 示 。 
按钮 对 表单 来 说 是 必 不 可 少 的 ， 无 论 用 户 对 表单 进行 了 什么 操作 ， 只 要 不 单 击 【 提 交 】 


按钮 ， 服 务 器 与 客户 之 间 就 不 会 有 任何 交互 操作 。 
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图 9-38 【列表 值 】 对 话 框 图 9-39 ”预览 效果 


9.2.7 ”案例 9 一 一 插入 按钮 


将 光标 放置 在 表单 内 ， 选 择 【 插 入 】 一 【表单 】 一 【按钮 】 命 令 ， 即 可 插入 按钮 ， 如 


图 9-40 所 示 。 
选中 表单 按钮 洲 澡 ， 即 可 在 打开 的 【属性 】 面 板 中 设置 按钮 Name( 名 称 )、Class( 类 )、 


Form Action( 动 作 ) 等 属性 ， 如 图 9-41 所 示 。 
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图 9-40 插入 按钮 图 9-41 设置 按钮 的 属性 


9.2.8 ”案例 10 一 一 插入 图 像 按钮 


在 HTML 5 中 ， 可 以 使 用 图 像 作为 按钮 图 标 。 
如 果 要 使 用 图 像 来 执行 任务 而 不 是 提交 数据 ， 则 只 
需要 将 某 种 行为 附加 到 表单 对 象 上 即 可 。 
GE 打开 素材 中 的 ch09\ 图 像 按钮 html 文 
件 ， 如 图 9-42 所 示 。 
ET 将 光标 置 于 第 4 行 单元 格 中 ， 选 择 
【插入 】 一 【表单 】 一 【图 像 域 】 命令， 
或 者 拖 动 【 插 入 】 面 板 的 【表单 】 选 项 卡 。 车 对 首先 时 时 
中 的 【图 像 域 】 按 钮 辐 ， 弹 出 【选择 图 像 
源 文件 】 对 话 框 ， 如 图 9-43 所 示 。 站 
EE> 在 【选择 图 像 源 文 件 】 对 话 框 中 选中 图 像 ， 然 后 单 击 【 确 定 】 按 钮 ， 即 可 插入 
图 像 域 ， 如 图 9-44 所 示 。 















































Db 
第 
EC 选中 该 图 像 域 ， 打 开 其 【属性 】 面 板 ， 设 置 图 像 域 的 属性 ， 这 里 采用 默认 设 和 
置 ， 如 图 9-45 所 示 。 
国 于 BY 完成 设置 后 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 9-46 所 示 。 可 
CE x 到 
| 司 [em 动 
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图 9-43 【选择 图 像 源 文件 】 对 话 框 图 9-44 插入 图 像 域 
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图 9-45 图像 域 属 性 面板 图 9-46 预览 效果 


9.2.9 案例 11 一 一 插入 文件 上 传 域 


通过 插入 文件 上 传 域 ， 可 以 实现 上 传 文档 和 图 
像 的 功能 。 插 入 文件 上 传 域 的 具体 操作 步骤 如 下 。 
ET 新 建 网 页 ， 答 入 文字 内 容 ， 将 光标 定位 
在 需要 插入 文件 上 传 域 的 位 置 ， 如 图 9-47 
所 示 。 
本 TY 选择 【插入 】 一 【表单 】 一 【文件 】 
命令 ， 如 图 9-48 所 示 。 或 者 拖 动 【 插 
入 】 面 板 【 表 单 】 选 项 卡 中 的 【文件 】 按 。 [ew IRS 
钮 国 。 
ETE> 可 插入 文本 上 传 域 ， 如 图 9-49 所 示 。 
ED 选择 文本 上 传 域 ， 在 【属性 】 面 板 中 可 以 设置 文本 上 传 域 的 属性 ， 如 图 9-50 
所 示 。 











9-47 ”新 建 网 页 
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9-49 插入 文本 上 传 域 


9-50 设置 文本 上 传 域 的 属性 


9.3 认识 行为 


行为 是 由 事件 和 该 事件 触发 的 动作 组 成 的 ， 其 功能 很 强大 ， 受 到 了 广大 网 页 设计 者 的 喜 
爱 。 行 为 是 一 系列 使 用 JavaScript 程序 预定 义 的 页 面 特效 工具 。 


9.3.1 行为 的 概念 


在 Dreamweaver CC 中 ， 行 为 是 插入 到 网 页 内 的 一 段 JavaScrip 代码 ， 由 对 象 、 事 件 和 动 
作 构 成 。 其 中 ， 对 象 是 产生 行为 的 主体 ， 如 图 像 、 文 本 等 ， 动 作 是 最 终 产生 的 工作 效果 ， 可 
以 是 播放 声音 、 交 换 图 像 、 弹 出 提示 信息 、 自 动 关 闭 网 页 等 。 

事件 用 于 指定 选 定 行为 在 何 种 情况 下 发 生 的 工作 ， 如 : 想 应 用 单 击 图 像 时 跳 转 到 指定 网 
站 的 行为 ， 用 户 需要 把 事件 指定 为 单 击 (onClick) 事 件 。 


9.3.2 案例 12 一 一 打开 【行为 】 面 板 


在 Dreamweaver CC 中 ， 对 行为 的 添加 和 控制 主要 是 通过 【行为 】 面 板 来 实现 的 。 选 择 
【窗口 】 一 【行为 】 命 令 ， 即 可 打开 【行为 】 面 板 ， 如 图 9-51 所 示 。 

使 用 【行为 】 面 板 可 以 将 行为 附加 到 页 面 元 素 ， 并 且 可 以 修改 以 前 所 附加 的 行为 的 参 
数 。【 行 为 】 面 板 中 包含 以 下 一 些 选 项 行为 。 

(1) 单 击 +. 按 钮 ， 可 弹出 动作 菜单 ， 如 图 9-52 所 示 ， 从 中 可 以 添加 行为 。 添 加 行为 时 ， 
只 需要 从 动作 菜单 中 选择 一 个 行为 项 即 可 。 当 从 该 动作 菜单 中 选择 一 个 动作 时 ， 将 出 现 一 个 


对 话 框 ， 可 以 在 此 对 话 框 中 指定 该 动作 的 参数 。 如 果 动 作 菜单 上 的 所 有 动作 都 处 于 灰 显 状 
态 ， 则 表示 选 定 的 元 素 无 法 生成 任何 事件 。 


过 站 尖 忆 订 潮 习 酒 党 一 一 潭 由 时 回 河 习 所 翰 6 詹 音 





图 9-51 【行为 】 面板 图 9-52 动作 菜单 
(2) 单 击 一 按钮 ， 可 从 行为 列表 中 删除 所 选 的 事件 和 动作 。 
(3) 单 击 人 按钮 或 了 按钮 ， 可 将 动作 项 向 前 移 或 向 后 移动 ， 从 而 改变 动作 执行 的 顺序 。 
对 于 不 能 在 列表 中 上 下 移动 的 动作 ， 箭 头 按 钮 则 处 于 禁用 状态 。 
Se 使 用 ShifttF4 组 合 键 在 为 选 定 对 象 添加 了 行为 之 后 ， 就 可 以 利用 行为 的 事件 列 
六 表 ， 选 择 触发 该 行为 的 事件 ， 打 开 【 行 为 〗 面 板 。 





9.4 常用 内 置 行为 的 应 用 


Dreamweaver CC 内 置 有 许多 行为 ， 每 一 种 行为 都 可 以 实现 一 个 动态 效果 或 用 户 与 网 页 之 
间 的 交互 。 


9.4.1 案例 13 一 一 交换 图 像 


使 用 【交换 图 像 】 动 作 ， 通 过 更 改 图 像 标 签 的 src 属性 ， 可 将 一 个 图 像 与 男 一 个 图 像 进 行 
交换 。 使 用 此 动作 可 以 创建 鼠标 经 过 图 像 和 其 他 的 图 像 效果 (包括 一 次 交换 多 个 图 像 )。 

创建 【交换 图 像 】 动 作 的 具体 操作 步骤 如 下 。 

打开 “ch09\ 应 用 行为 indexhtml” 文 件 ， 如 图 9-53 所 示 。 

ED 选择 【窗口 】 一 【行为 】 命 令 ， 打 开 【 行 为 】 面 板 。 选 中 图 像 ， 单 击 +v 按 钮 ， 
在 弹出 的 菜单 中 选择 【交换 图 像 】 命 令 ， 如 图 9-54 所 示 。 

EGGD 弹出 【交换 图 像 】 对 话 框 ， 如 图 9-55 所 示 。 

EC 单 击 【 浏 览 】 按 钮 ， 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 一 幅 图 像 ， 如 
图 9-56 所 示 。 
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图 9-55 【交换 图 像 】 对 话 框 





图 9-56 【选择 图 像 源 文件 】 对 话 框 
EEIDp 单 击 【确定 】 按 钮 ， 返 回 【 交 换 图 像 】 对 话 框 ， 如 图 9-57 所 示 。 


攻 于 BY 单 击 【确定 】 按 钮 ， 添 加 【交换 图 像 】 行 为 ， 如 图 9-58 所 示 。 
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9-57 ”设置 原始 图 像 


图 9-58 添加 【交换 图 像 】 行 为 
EC 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 9-59 所 示 。 
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9-59 ”预览 效果 


9.4.2 ”案例 14 一 一 弹出 信息 


使 用 【弹出 信息 】 动 作 可 以 显示 一 个 带 有 指定 信息 的 JavaScript 警告 。 因 为 JavaScript 警 
告 只 有 一 个 【确定 】 按 钮 ， 所 以 使 用 此 动作 可 以 提供 信息 ， 但 不 能 为 用 户 提供 选择 。 
使 用 【弹出 信息 】 动 作 的 具体 操作 步骤 如 下 。 
打开 素材 中 的 “ch09\ 应 用 行为 index html” 文件 ， 如 图 9-60 所 示 。 
加 D3 单 击 文档 窗口 状态 栏 中 的 <body> 标 签 ， 选 择 【 窗 口 】 一 【行为 】 命 令 ， 打 开 
【行为 】 面 板 。 单 击 【行为 】 面 板 中 的 二 -按钮 ， 在 弹出 的 菜单 中 选择 【弹出 信息 】 
命令 ， 如 图 9-61 所 示 。 
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图 9-60 ”打开 素材 文件 图 9-61 选择 【弹出 信息 】 命 令 


区 TB 弹出 【弹出 信息 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 要 显示 的 信息 “欢迎 你 的 
光临 ”， 如 图 9-62 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 9-63 所 示 。 

区 了 BY 保存 文档 ， 按 F12 键 在 下 浏览 器 中 预览 ， 效 果 如 图 9-64 所 示 。 
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9.4.3 ”案例 15 一 一 打开 浏览 器 窗口 


使 用 【打开 浏览 器 窗口 】 动 作 可 以 在 一 个 新 的 窗口 中 打开 URL， 可 以 指定 新 窗口 的 属性 
(包括 其 大 小 )、 特 性 (是 否 可 以 调整 大 小 、 是 否 具 有 菜单 栏 等 ) 和 名 称 。 
使 用 【打开 浏览 器 窗口 】 动 作 的 具体 操作 步骤 如 下 。 
打开 素材 中 的 “cho9\ 应 用 行为 index html” 文件 ， 如 图 9-65 所 示 。 
ED 选择 【窗口 】 一 【行为 】 命 令 ， 打 开 【 行 为 】 面 板 。 单 击 该 面板 中 的 四 按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 【打开 浏览 器 窗口 】 命 令 ， 如 图 9-66 所 示 。 
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图 9-65 打开 素材 文件 图 9-66 选择 【打开 浏览 器 窗口 】 命 令 


ECEDB) 弹出 【打开 浏览 器 窗口 】 对 话 框 ， 在 【要 显示 的 URL】 文本 框 中 输入 在 新 窗口 
中 载 入 的 目标 URL 地 址 (可 以 是 网 页 ， 也 可 以 是 图 像 ); 或 者 单 击 【 要 显示 的 URL】 
文本 框 右 侧 的 【浏览 】 按 钮 ， 弹 出 【选择 文件 】 对 话 框 ， 如 图 9-67 所 示 。 

EC 在 【选择 文件 】 对 话 框 中 选择 文件 ， 单 击 【 确 定 】 按 钮 ， 将 其 添加 到 文本 框 
中 ， 然 后 将 【窗口 宽度 】 和 【窗口 高 度 】 分 别 设置 为 380 和 350， 在 【窗口 名 称 】 
文本 框 中 输入 “弹出 窗口 ”， 如 图 9-68 所 示 。 

在 【打开 浏览 器 窗口 】 对 话 框 中 ， 各 部 分 的 含义 介绍 如 下 。 

(1) 【窗口 宽度 】 和 【窗口 高 度 】 文 本 框 : 用 于 指定 窗口 的 宽度 和 高 度 ( 以 像素 为 单位 )。 

(2) 【导航 工具 栏 】 复 选 框 :浏览 器 窗口 的 组 成 部 分 ， 包括 【 后 退 】、【 前 进 】、【 主 

页 】 和 【重新 载 入 】 等 按钮 。 
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Eu 和 
所 -个 下 代码 ， 应 用 行为 img 担 过 ? 
刘 妥 ”新入 伯 夫 -m0 
加 二 应 站 各 国 站。 [ERREED 其 
M60 0 过 
国 3 条 确定 | 
下 上 BS lg 攻 本 到 要 显示 的 URL [ing/01. jpe [E-mu | | 
-a 001jpg otjps omjpg ojpg 商 口 亮度 : [380 。 | ”窗口 高 度 : [350 
有 填 部 助 
人 置 昨 局 性 导航 工具 栏 口 荣 单 条 
总 i 下 一 口 地 址 工具 栏 口 需要 时 使 用 当 动 条 
won ~ 口 扩 口 调 邮 大 小手 本 
人 府 口 名 村: 一 于 看 口 
HEN [om -| Fs = 
| SR 最 53 a 
9-67 【选择 文件 】 对 话 框 9-68 【打开 浏览 器 窗口 】 对 话 杠 


(3) 【地 址 工具 栏 】 复 选 框 : 浏览 器 窗口 的 组 成 部 分 ， 包 括 【 地 址 】 文 本 框 等 。 

(4) 【状态 栏 】 复 选 框 : 位 于 浏览 器 窗口 的 底部 ， 在 该 区 域 中 显示 消息 (如 剩余 的 载 入 时 
间 以 及 与 链接 关联 的 URL)。 

(5) 【菜单 条 】 复 选 框 : 浏览 器 窗口 上 显示 菜单 (如 文件 、 编 辑 、 查 看 、 转 到 、 帮 助 等 菜 
单 ) 的 区 域 。 如 果 要 让 访问 者 能 够 从 新 窗口 导航 ， 用 户 应 该 选中 此 复 选 框 。 如 果 取 消 选 中 此 复 
选 框 ， 在 新 窗口 中 用 户 只 能 关闭 或 最 小 化 窗口 。 

(6) 【需要 时 使 用 滚动 条 】 复 选 框 : 用 于 指定 如 果 内 容 超 出 可 视 区 域 时 将 显示 滚动 条 。 
如 果 取 消 选 中 此 复 选 框 ， 则 不 显示 滚动 条 。 如 果 【 调 整 大 小 手柄 】 复 选 框 也 被 取消 选中 ， 访 
问 者 将 很 难看 到 超出 窗口 大 小 以 外 的 内 容 (虽然 他 们 可 以 拖 动 窗口 的 边缘 使 窗口 滚动 )。 

(7) 【调整 大 小 手柄 】 复 选 框 : 用 于 指定 应 该 能 够 调整 窗口 的 大 小 。 方 法 是 拖 动 窗口 的 
右 下 角 或 单 击 右上 角 的 最 大 化 按钮 。 如 果 取 消 选 中 此 复 选 框 ， 调 整 大 小 控件 将 不 可 用 ， 右 下 
角 也 不 能 拖 动 。 

(8) 【窗口 名 称 】 文 本 框 : 新 窗口 的 名 称 。 如 果 用 户 要 通过 JavaScript 使 用 链接 指向 新 
窗口 或 控制 新 窗口 ， 则 应 该 对 新 窗口 命名 。 此 名 称 不 能 包含 空格 或 特殊 字符 。 

EED) 单 击 【确定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 9-69 所 示 。 

ED 保存 文 要 ， 按 Fl12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 9-70 所 示 。 
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图 9-69 设置 行为 事件 图 9-70 ”预览 效果 
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9.4.4 ”案例 16 一 一 检查 表单 行为 


在 包含 表单 的 页 面 中 填写 相关 信息 时 ， 当 信息 填写 出 错时 ， 系 统 会 自动 显示 出 错 信息 ， 
这 是 通过 检查 表单 来 实现 的 。 在 Dreamweaver CC 中 ， 可 以 使 用 【检查 表单 】 行 为 来 为 文本 域 
设置 有 效 性 规则 ， 检 查 文本 域 中 的 内 容 是 否 有 效 ， 以 确保 输入 数据 的 正确 性 。 

使 用 【检查 表单 】 行 为 的 具体 操作 步骤 如 下 。 

EEJDp 打开 “ch09%\ 检 查 表单 行为 html” 文 件 ， 如 图 9-71 所 示 。 

EEIPy 按 Shift+F4 组 合 键 ， 打 开 【 行 为 】 面 板 ， 如 图 9-72 所 示 。 
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图 9-71 打开 素材 文件 图 9-72 【行为 】 面 板 
EDB) 单 击 【行为 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【检查 表单 】 命 
令 ， 如 图 9-73 所 示 。 


EEC 弹出 【检查 表单 】 对 话 框 ，【 域 】 列 表 框 中 显示 了 文档 中 插入 的 文本 域 ， 如 
图 9-74 所 示 。 
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打开 浏览 器 宣 品 值 : 口 必需 9 
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9-73 ”选择 【检查 表单 】 命 令 9-74 【检查 表单 】 对 话 框 


在 【检查 表单 】 对 话 框 中 主要 参数 选项 的 具体 作用 如 下 。 

(1) 【 域 】 列 表 框 :用 于 选择 要 检查 数据 有 效 性 的 表单 对 象 。 

(2) 【 值 】 复 选 框 : 用 于 设置 该 文本 域 中 是 否 使 用 必 填 文本 域 。 

(3) 【可 接受 】 选 项 区 域 : 用 于 设置 文本 域 中 可 填 数 据 的 类 型 ， 可 以 选择 4 种 类 型 。 选 
中 【任何 东西 】 单 选 按钮 ， 表 明文 本 域 中 可 以 输入 任意 类 型 的 数据 。 选 中 【数字 】 单 选 按 
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钮 ， 表 明文 本 域 中 只 能 输入 数字 数据 。 选 中 【电子 邮件 地 址 】 单 选 按钮 ， 表 明文 本 域 中 只 能 
输入 电子 邮件 地 址 。 选 中 【数字 从 】 单 选 按钮 ， 可 以 设置 可 输入 数字 值 的 范围 ， 可 在 右边 的 
文本 框 中 从 左 至 右 分 别 输入 最 小 数值 和 最 大 数值 。 
EEC 选中 textfield3 文本 域 ， 选 中 【必需 的 】 复 选 框 ， 选 中 【任何 东西 】 单 选 按钮 ， 
设置 该 文本 域 是 必须 填写 项 ， 可 以 输入 任何 文本 内 容 ， 如 图 9-75 所 示 。 
EC 参照 相同 的 方法 ， 设 置 textfield2 和 textfield4 文本 域 为 必须 填写 项 。 其 中 
textfield2 文本 域 的 可 接受 类 型 为 数字 ，textfield4 文本 域 的 可 接受 类 型 为 任何 东西 ， 






































如 图 9-76 所 示 。 
检查 表单 x x 
这 | 
和 E21 | 
> EE EE | 
可 接受 ，@ 任何 东西 OW 可 招 受 加 任 亲本 Ow 
口 电子 邮件 地 址 。 口 册 守 从 到 口 电 了 出 作 地址 口 吉 # 从 [| 到 [ | 
图 9-75 设置 【检查 表单 】 属 性 图 9-76 设置 其 他 检查 信息 


EC 单 击 【 确 定 】 按 钮 ， 即 可 添加 【检查 表单 】 行 为 ， 如 图 9-77 所 示 。 
EECUD 保存 文档 ， 按 F12 键 在 下 浏览 器 中 预览 效果 。 当 在 文档 的 文本 域 中 未 填写 或 填 
写 有 误 时 ， 会 弹出 一 个 信息 提示 框 ， 提 示 出 错 信息 ， 如 图 9-78 所 示 。 


来 自 网 页 的 消息 x 





The following error(s) occurred: 
A- teateld is required. 
textfield2 is required, 
- password is required, 
-textfield4 is required. 


图 9-77 添加 【检查 表单 】 行 为 图 9-78 ”预览 网 页 提示 信息 








9.4.5 ”案例 17 一 一 设置 状态 栏 文本 


使 用 【设置 状态 栏 文本 】 动 作 可 以 在 浏览 器 窗口 底部 左 侧 的 状态 栏 中 显示 消息 。 比 如 ， 
可 以 使 用 此 动作 在 状态 栏 中 显示 链接 的 目标 而 不 是 显示 与 之 关联 的 URL。 
设置 状态 栏 文本 的 具体 操作 步骤 如 下 。 
EEJTgp 打开 “ch0%\ 设 置 状态 栏 indexhtml” 文 件 ， 如 图 9-79 所 示 。 
EEJDp 按 Shift+F4 组 合 键 ， 打开 【 行 为 】 面 板 ， 如 图 9-80 所 示 。 
EC 单 击 【行为 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【设置 文本 】-、【 设 
置 状态 栏 文本 】 命 令 ， 如 图 9-81 所 示 。 
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EC 弹出 【设置 状态 栏 文本 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 “欢迎 光临 ! ”， 
也 可 以 输入 相应 的 JavaScript 代码 ， 如 图 9-82 所 示 。 






































9-80 【行为 】 面 板 






































图 9-81 选择 【设置 状态 栏 文本 】 命 令 图 9-82 【设置 状态 栏 文本 】 对 话 框 


ECDRD) 单 击 【确定 】 按 钮 ， 添 加 行为 ， 如 图 9-83 所 示 。 
保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 9-84 所 示 。 
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图 9-83 添加 行为 图 9-84 ”预览 效果 
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9.5 综合 案例 一 一 使 用 表单 制作 留言 本 


一 个 好 的 网 站 ， 总 是 在 不 断 地 完善 和 改进 。 在 改进 的 过 程 中 ， 总 是 要 经 常 听取 别人 的 意 


， 为 此 可 以 通过 留言 本 来 获取 浏览 者 浏览 网 站 后 的 反馈 信息 。 


使 用 表单 制作 留言 本 的 具体 操作 步骤 如 下 。 

TIY 打开 “ch09\ 制 作 留 言 本 .html” 文 件 ， 如 图 9-85 所 示 。 

国 于 BY 将 光标 移动 到 下 一 行 ， 单 击 【插入 】 面 板 的 【表单 】 选 项 卡 中 的 【表单 】 按 钮 
国 ， 插 入 一 个 表单 ， 如 图 9-86 所 示 。 


CE ED 




















可 而 EE 
图 9-85 打开 素材 文件 图 9-86 插入 表单 


EES9 将 光标 放置 在 红色 的 虚线 内 ， 选 择 【 插 入 】 一 【表格 】 命 令 ， 打 开 【 表 格 】 对 
话 框 。 将 【 行 数 】 设 置 为 9，【 列 】 设 置 为 2，【 表 格 宽度 】 设 置 为 470 像素 ，【 边 
框 粗细 】 设 置 为 1，【 单 元 格 边 距 】 设 置 为 2，【 单 元 格 间距 】 设 置 为 3， 如 图 9-87 
所 示 。 

EEC 单 击 【 确 定 】 按 钮 ， 在 表单 中 插入 表格 ， 并 调整 表格 的 宽度 ， 如 图 9-88 所 示 。 
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图 9-87 【表格 】 对 话 框 图 9-88 添加 表格 


EEIDy 在 第 1 列 单元 格 中 输入 相应 的 文字 ， 然 后 选 定 文字 ， 在 【 属性】 面板 中 ， 设 置 
文字 的 【大 小 】 为 12， 将 【水 平 】 设 置 为 【 右 对 齐 】， 【垂直 】 设 置 为 【居中 】， 
如 图 9-89 所 示 。 
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EEC) 将 光标 放置 在 第 1 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文本 
域 】 命 令 ， 插 入 文本 域 。 在 【属性 】 面 板 中 ， 设 置 文本 域 的 字符 宽度 为 12， 最 多 字 
符 数 为 12， 如 图 9-90 所 示 。 


























图 9-89 在 表格 中 输入 文字 图 9-90 添加 文本 域 


EC 重复 以 上 步 又， 在 第 4 行 、 第 5 行 和 第 6 行 的 第 2 列 单元 格 中 插入 文本 域 ， 并 
设置 相应 的 属性 ， 如 图 9-91 所 示 。 

国 于 BY 将 光标 放置 在 第 2 行 的 第 2 列 单元 格 中 ， 单 击 【 插 入 】 面 板 的 【表单 】 选 项 卡 
中 的 【 单 选 按钮 】 按 钮 回 ， 插 入 单 选 按钮 。 在 单 选 按钮 的 右 侧 输 入 “ 男 ”， 按 照 同 
样 的 方法 再 插入 一 个 单 选 按 钮 ， 输 入 “ 女 ”。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 
分 别 设置 为 【已 选中 】 和 【未 选中 】， 如 图 9-92 所 示 。 

















图 9-91 添加 其 他 文本 域 图 9-92 添加 单 选 按钮 


EECD) 将 光标 放置 在 第 3 行 的 第 2 列 单元 格 中 ， 单 击 【 插 入 】 面 板 的 【表单 】 选 项 卡 
中 的 【 复 选 框 】 按 钮 回 ， 插 入 复 选 框 。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 设 置 为 
“未 选中 ”， 在 其 后 输入 文本 “音乐 ”， 如 图 9-93 所 示 。 

EC 按照 同样 的 方法 ， 插 入 其 他 复 选 框 ， 设 置 其 属性 并 输入 文字 ， 如 图 9-94 所 示 。 

EC 将 光标 置 于 第 8 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文本 区 
域 】 命 令 ,插入 多 行文 本 域 ， 并 将 【属性 】 面 板 中 的 选项 设置 为 默认 值 ， 如 图 9-95 
所 示 。 

EC 将 光标 放置 在 第 7 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文件 
域 】 命 令 ， 插 入 文件 域 ， 并 在 【属性 】 面 板 中 为 其 设置 相应 的 属性 ， 如 图 9-96 所 示 。 


令 174 























图 9-94 添加 其 他 复 选 框 
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图 9-95 插入 多 行文 本 域 图 9-96 插入 文件 域 


E> 选 定 第 9 行 的 两 个 单元 格 ， 选 择 【修改 】 一 【表格 】 一 【合并 单元 格 】 命 令 ， 
合并 单元 格 。 将 光标 放置 在 合并 后 的 单元 格 中 ， 在 【属性 】 面 板 中 ， 将 【水 平 】 设 
置 为 【居中 对 齐 】， 如 图 9-97 所 示 。 

EEC) 选择 【插入 】 一 【表单 】 一 【按钮 】 命 令 ， 插 入 [恒安 ] 按 钮 和 [ 匿 时 ] 按 钮 ， 并 在 
【属性 】 面 板 中 ， 分 别 为 其 设置 相应 的 属性 ， 如 图 9-98 所 示 。 

葬 于 BY 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 9-99 所 示 。 




















9-97 ”合并 单 选 格 9-98 ”插入 【提交 )】 与 【 重 置 】 按钮 
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图 9-99 ”预览 网 页 效果 


9.6 疑难 解 惑 


疑问 1: 如 何 保证 表单 在 IE 浏览 器 中 正常 显示 ? 


答 : 在 Dreamweaver 中 插入 表单 并 调整 到 合适 的 大 小 后 ， 在 正 浏览 器 中 预览 时 可 能 会 出 
现 表单 大 小 失真 的 情况 。 为 了 保证 表单 在 正 浏览 器 中 能 够 正常 显示 ， 建 议 使 用 CSS 样式 表 
调整 表单 的 大 小 。 


疑问 2: 如 何 下 载 并 使 用 更 多 的 行为 ? 


答 : Dreamweaver 包含 了 百 余 个 事件 、 行 为 ， 如 果 认 为 这 些 行为 还 不 能 满足 需求 ， 
Dreamweaver 同时 也 提供 有 扩展 行为 的 功能 ， 可 以 下 载 第 三 方 的 行为 。 下 载 之 后 解压 到 
Dreamweaver 的 安装 目录 Adobe Dreamweaver CC\configuration\Behaviors\Actions 下 。 重 新 启 
动 Dreamweaver， 在 【行为 】 面 板 中 单 击 罗 按 钮 ， 在 弹出 的 动作 菜单 中 即 可 看 到 新 添加 的 动 
作 选 项 。 
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网 页 美化 布局 


各 第 10 章 简单 的 网 页 布局 一 一 使 用 表格 布局 网 页 

外 第 11 章 读 懂 样式 表 密 码 一 一 使 用 CSS 层 肥 样式 表 

外 第 12 章 架构 师 的 大 比拼 一 一 利用 Div+CSS 布局 
网 页 


第 10 音 
简单 的 网 页 布局 


一 一 使 用 表格 
布局 网 页 


表格 是 布局 页 面 时 极为 有 用 的 设计 工具 。 通 过 使 用 表格 布局 网 页 可 以 实现 对 页 
面 元 素 的 准确 定位 ， 使 得 页 面 在 形式 上 丰富 多 彩 、 条 理 清 晰 ， 在 组 织 上 井然 有 序 而 
又 不 显 单 调 。 合理 地 利用 表格 来 布局 页 面 有 助 于 协调 页 面 结构 的 均衡 。 本 章 主要 介 
绍 如 何 使 用 表格 布局 网 页 。 
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10.1 案例 1 一 一 插入 表格 


表格 由 行 、 列 和 单元 格 3 部 分 组 成 。 使 用 表格 可 以 排列 网 页 中 的 文本 、 图 像 等 各 种 网 页 
元 素 ， 可 以 在 表格 中 自由 地 进行 移动 、 复 制 、 粘 贴 等 操作 ， 还 可 以 在 表格 中 嵌 套 表格 ， 使 页 
面 的 设计 更 加 灵活 、 方 便 。 

使 用 【插入 】 面 板 或 【插入 】 菜 单 都 可 以 创建 新 表格 。 插 入 表格 的 具体 操作 步骤 如 下 。 

ED 新 建 一 个 空白 网 页 文档 ， 将 光标 定位 在 需要 插入 表格 的 位 置 ， 如 图 10-1 所 示 。 











图 10-1 ”空白 网 页 文档 


EECRPy 单 击 【插入 】 面 板 的 【常用 】 选 项 卡 中 的 【表格 】 按 钮 ， 或 选择 【插入 】 一 
【表格 】 命 令 ， 如 图 10-2 所 示 。 


x] $M) (0) S$(O 站 上 (9) 
| pw) 
HTML5 Video(V) Ctrl+Ak+Shift+V 


画布 (A) 





图 10-2 【常用 】 选 项 卡 与 【表格 】 命 令 


EEDep 打开 【表格 】 对 话 框 ， 在 其 中 可 以 对 表格 的 行 数 、 列 数 、 表 格 宽度 等 信息 进行 
设置 ， 如 图 10-3 所 示 。 

【表格 】 对 话 框 中 各 个 选项 及 参数 的 含义 如 下 。 

(1) 【 行 数 】: 在 该 文本 框 中 输入 新 建 表格 的 行 数 。 

(2) 【 列 】: 在 该 文本 框 中 输入 新 建 表格 的 列 数 。 

(3) 【表格 宽度 】: 该 文本 框 用 于 设置 表格 的 宽度 ， 单 位 可 以 是 像素 或 百分比 。 

(4) 【边框 粗细 】: 该 文本 框 用 于 设置 表格 边框 的 宽度 (以 像素 为 单位 )。 若 设置 为 0， 在 
浏览 时 则 不 显示 表格 边框 。 

(5) 【单元 格 边 距 】: 该 文本 框 用 于 设置 单元 格 边 框 和 单元 格 内 容 之 间 的 像素 数 。 


使 180 


(6) 【单元 格 间距 】: 该 文本 框 用 于 设置 相 邻 单元 格 之 间 的 像素 数 。 

(7) 【标题 】: 该 选项 组 用 于 设置 表 头 样式 ， 有 4 种 样式 可 供 选择 ， 分 别 如 下 。 

【无 】: 不 将 表格 的 首 列 或 首 行 设置 为 标题 。 

【 左 】: 将 表格 的 第 一 列 作为 标题 列 ， 表 格 中 的 每 一 行 可 以 输入 一 个 标题 。 

【顶部 】: 将 表格 的 第 一 行 作为 标题 行 ， 表 格 中 的 每 一 列 可 以 输入 一 个 标题 。 

【两 者 】: 可 以 在 表格 中 同时 输入 列 标题 和 行 标题 。 

(8) 【标题 】: 在 该 文本 框 中 输入 表格 的 标题 ， 标 题 将 显示 在 表格 的 外 部 。 

(9) 【摘要 】: 在 这 里 可 以 输入 文字 对 表格 进行 说 明 或 注释 ， 但 此 内 容 不 会 在 浏览 器 中 
显示 ， 仅 在 源 代 码 中 显示 ， 可 提高 源 代 码 的 可 读 性 。 

EGR 单 击 【确定 】 按 钮 ， 即 可 在 文档 中 插入 表格 ， 如 图 10-4 所 示 。 


表格 x 
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图 10-3 【表格 】 对 话 框 图 10-4 在 文档 中 插入 表格 
10.2 选中 表格 


插入 表格 后 ， 可 以 对 表格 进行 选中 操作 。 比 如 ， 选 中 整个 表格 或 表格 中 的 行 与 列 、 单 元 格 等 。 


10.2.1 案例 2 一 一 选中 完整 的 表格 
选中 完整 表格 的 方法 主要 有 以 下 4 种 。 
(1) 将 鼠标 指针 移动 到 表格 上 面 ， 当 鼠标 指针 呈 网 格 图 标 轩 时 单 击 鼠标 左 键 ， 如 图 10-5 


所 示 。 
(2) 单 击 表 格 四 周 的 任意 一 条 边框 线 ， 如 图 10-6 所 示 。 
(3) 将 光标 置 于 任意 一 个 单元 格 中 ， 选 择 【 修 改 】 一 【表格 】 一 【选择 表格 】 命 令 ， 如 


图 10-7 所 示 。 
(4) 将 光标 置 于 任意 一 个 单元 格 中 ， 在 文档 窗口 状态 栏 的 标签 选择 器 中 单 击 <table> 标 


签 ， 如 图 10-8 所 示 。 
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10-5 选中 表格 的 方法 (1) 
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10-6 ”选中 表格 的 方法 (2) 
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图 10-7 选中 表格 的 方法 (3) 
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10.2.2 ”案例 3 一 一 选中 行 和 列 


选中 表格 中 的 行 和 列 的 方法 主要 有 以 下 两 种 。 
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图 10-8 选中 表格 的 方法 (4) 

















(1) 将 光标 定位 于 行 首 或 列 首 ， 鼠 标 指针 变 成 中 或 4 的 箭头 形状 时 单 击 鼠标 左 键 ， 即 可 选 


中 表格 的 行 或 列 ， 如 图 10-9 所 示 。 


(2) 按 住 鼠标 左 键 不 放 从 左 至 右 或 从 上 至 下 拖 动 ， 即 可 选中 表格 的 行 或 列 ， 如 图 10-10 所 示 。 
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图 10-9 选中 表格 中 的 列 


10-10 ”选中 表格 中 的 行 


10.2.3 ”案例 4 一 一 选中 单元 格 
要 想 选 中 表格 中 的 单个 单元 格 ， 可 以 进行 





函 unaued- 






































以 下 几 种 操作 。 
(1) 按 住 Ctrl 键 不 放 单 击 单元 格 ， 可 以 选 

中 一 个 单元 格 。 | 
(2) 按 住 鼠标 左 键 不 放 并 拖 动 ， 可 以 选中 

单个 单元 格 。 
(3) 将 光标 放置 在 要 选中 的 单元 格 中 ， 单 

击 文档 窗口 状态 栏 上 的 <td> 标 签 ， 即 可 选中 该 














单元 格 ， 如 图 10-11 所 示 。 

想 要 选中 表格 中 的 多 个 单元 格 ， 可 以 进行 
下 列 两 种 操作 。 图 10-11 选中 单元 格 

(1) 选中 相 邻 的 单元 格 、 行 或 列 : 先 选中 
一 个 单元 格 、 行 或 列 ， 按 住 Shift 键 的 同时 单 击 另 一 个 单元 格 、 行 或 列 ， 和 拢 形 区 域内 的 所 有 单 
元 格 、 行 或 列 就 都 会 被 选中 ， 如 图 10-12 所 示 。 

(2) 选中 不 相 邻 的 单元 格 、 行 或 列 : 按 住 Ctrl 键 的 同时 单 击 需要 选中 的 单元 格 、 行 或 列 
即 可 ， 如 图 10-13 所 示 。 
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图 10-12 选中 相 邻 的 单元 格 图 10-13 ”选中 不 相 邻 的 单元 格 
Ee 在 选中 单元 格 、 行 或 列 时 ， 两 次 单 击 会 取消 已 选中 的 对 象 的 选中 状态 


10.3 表格 属性 


为 了 使 创建 的 表格 更 加 美观 ， 需 要 对 表格 的 属性 进行 设置 。 表 格 属性 主要 包括 完整 表格 
的 属性 和 表格 中 单元 格 的 属性 两 种 。 


. 
13@ 
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10.3.1 案例 5 一 一 设置 单元 格 属性 


在 Dreamweaver CC 中 ， 可 以 单独 设置 单元 格 的 属性 。 设 置 单元 格 属性 的 具体 操作 步 又 如 下 。 

EE 按 住 Cal 键 的 同时 单 击 单元 格 的 边框 ， 选 中 单元 格 ， 如 图 10-14 所 示 。 

ET 选择 【窗口 】 一 【属性 】 命 令 ， 打 开 显示 单元 格 属性 的 面板 ， 从 中 对 单元 格 、 
行 和 列 等 的 属性 进行 设置 ， 比 如 将 选中 的 单元 格 的 背景 颜色 设置 为 蓝 色 (#0000FF)， 





















































































































































如 图 10-15 所 示 。 
函 wnatedT 本 Bri | 
| 
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Chody? talley ctr)RtD] _ 国 同 世 | 4 x 297v Chody) Ctalle) Car)RED] 回 同 世 te x297v 
图 10-14 选中 单元 格 图 10-15 “为 单元 格 添加 背景 颜色 


在 选中 单元 格 后 也 可 以 按 Ctrl+F3 组 合 键 ， 打 开 【 属 性 】 面 板 ， 如 图 10-16 所 示 。 
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图 10-16 单元 格 的 【属性 】 面 板 


在 单元 格 的 【属性 】 面 板 中 ， 可 以 设置 以 下 选项 或 参数 。 

(1) 【合并 单元 格 】 按 钮 回 : 用 于 把 所 选 的 多 个 单元 格 合并 为 一 个 单元 格 。 

(2) 【 拆 分 单元 格 为 行 或 列 】 按 钮 中， 用 于 将 一 个 单元 格 分 成 两 个 或 更 多 个 单元 格 。 
| 一 次 只 能 对 一 个 单元 格 进行 拆 分 ， 如 果 选 择 的 单元 格 多 于 一 个 ， 此 按钮 将 被 
了 提示 

禁用 。 
(3) 【水 平 】: 该 下 拉 列 表 框 用 于 设置 单元 格 中 对 象 的 水 平 对 齐 方 式 ， 其 中 包括 默认 、 
左 对 齐 、 居 中 对 齐 和 右 对 齐 4 个 选项 。 
(4) 【垂直 】: 该 下 拉 列 表 框 用 于 设置 单元 格 中 对 象 的 垂直 对 齐 方式 ， 其 中 包括 默认 、 
顶端 、 居 中 、 底 部 和 基线 5 个 选项 。 
(5) 【 宽 】 和 【高 】: 这 两 个 文本 框 用 于 设置 单元 格 的 宽度 和 高 度 ， 单 位 是 像素 或 百 
分 比 。 


EC 采用 像素 为 单位 的 值 是 表格 、 行 或 列 当前 的 宽度 或 高 度 的 值 ; 以 百分比 为 
以 单位 的 值 是 表格 、 行 或 列 占 当 前 文档 窗口 宽度 或 高 度 的 百分比 。 


(6) 【不 换行 】: 该 复 选 框 用 于 设置 单元 格 文本 是 否 换行 。 如 果 选 中 【不 换行 】 复 选 
框 ， 表 示 单 元 格 的 宽度 随 文字 长 度 的 增加 而 变 宽 。 当 输入 的 表格 数据 超出 单元 格 宽度 时 ， 单 元 
格 会 调整 宽度 来 容纳 数据 。 

(7) 【标题 】: 该 复 选 杠 用 于 将 当前 单元 格 设置 为 标题 行 。 

(8) 【背景 颜色 】: 该 选项 用 于 设置 单元 格 的 背景 颜色 。 使 用 颜色 选择 器 避 可 选择 要 设 
置 的 单元 格 的 背景 颜色 。 


10.3.2 ”案例 6 一 一 设置 整个 表格 属性 


选中 整个 表格 后 ， 选 择 【 窗 口 】 一 【属性 】 命 令 或 按 Ctl+F3 组 合 键 ， 即 可 打开 表格 的 
【属性 】 面 板 ， 如 图 10-17 所 示 。 
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图 10-17 表格 的 【属性 】 面 板 


在 表格 的 【属性 】 面 板 中 ， 可 以 对 表格 的 行 、 宽 、 对 齐 方式 等 参数 进行 设置 。 不 过 ， 对 
表格 的 高 度 一 般 不 需要 进行 设置 ， 因 为 表格 会 根据 单元 格 中 所 输入 的 内 容 自动 调整 。 


10.4 操作 表格 


表格 创建 完成 后 ， 还 可 以 对 表格 进行 操作 ， 如 : 调整 表格 的 大 小 ， 增 加 或 删除 表格 中 的 
行 与 列 ， 合 并 与 拆 分 单元 格 等 。 


10.4.1 案例 7 一 一 调整 表格 的 大 小 


创建 表格 后 ， 可 以 根据 需要 调整 表格 或 表格 的 行 、 列 的 宽度 或 高 度 。 整 个 表格 的 大 小 被 
调整 时 ， 表 格 中 所 有 的 单元 格 将 成 比例 地 改变 大 小 。 

调整 行 和 列 大 小 的 方法 如 下 。 

(1) 要 改变 行 的 高 度 ， 将 鼠标 指针 置 于 表格 两 行 之 间 的 界线 上 ， 当 鼠标 指针 变 成 专 形状 
时 上 下 拖 动 鼠标 即 可 ， 如 图 10-18 所 示 。 

(2) 要 改变 列 的 宽度 ， 将 鼠标 指针 置 于 表格 两 列 之 间 的 界线 上 ， 当 鼠标 指针 变 成 形状 
时 左右 拖 动 鼠标 即 可 ， 如 图 10-19 所 示 。 

调整 表格 大 小 的 方法 为 : 选中 表格 后 拖 动 选择 手柄 ， 沿 相应 的 方向 调整 大 小 。 拖 动 右 下 
角 的 手柄 ， 可 在 两 个 方向 上 调整 表格 的 大 小 (宽度 和 高 度 )， 如 图 10-20 所 示 。 
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函 unaued- 二 可 本 C Ta -ox 
而 | 
| EE | 
[body> rableletr> Ctdy Jcbody> Rtable] 加 天 482 x 336; 
图 10-18 改变 行 的 高 度 图 10-19 ”改变 列 的 宽度 





10-20 ”调整 表格 的 大 小 
10.4.2 ”案例 8 一 一 增加 行 和 列 


要 在 当前 表格 中 增加 行 和 列 ， 可 以 进行 以 下 几 种 操作 。 

(1) 将 光标 移动 到 要 插入 行 的 下 一 行 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【 插 
入 行 】 命 令 ， 如 图 10-21 所 示 。 

(2) 将 光标 移动 到 要 插入 行 的 下 一 行 ， 选 择 【 修改】 一 【表格 】 一 【插入 行 】 命 令 ， 如 
图 10-22 所 示 。 
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图 10-21 选择 【插入 行 】 命 令 10-22 ”选择 【插入 行 】 命 令 
(3) 将 光标 移动 到 要 插入 行 的 单元 格 ， 按 Ctl+M 组 合 键 即 可 插入 行 ， 如 图 10-23 所 示 。 
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en 使 用 键盘 也 可 以 在 单元 格 中 ES 
NE 移动 光标 ， 按 Tab 键 可 将 光标 移 
动 到 下 一 个 单元 格 ; 按 Shift + 
Tab 组 合 键 可 将 光标 移动 到 上 一 ES 
[| 











个 单元 格 。 在 表格 最 后 一 个 单元 
格 中 按 Tab 键 ， 将 自动 添加 一 行 
单元 格 。 一 一 直 


要 在 当前 表格 中 插入 列 ， 可 以 进行 以 下 几 Er 二 
种 操作 。 10-23 插入 行 

(1) 将 光标 移动 到 要 插入 列 的 右边 一 列 并 
右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【插入 列 】 命 令 ， 如 图 10-24 所 示 。 


N 
(2) 将 光标 移动 到 要 插入 列 的 右边 一 列 ， 选 择 【 修 改 】 一 【表格 】 一 【插入 列 】 命 令 ， SS 
如 图 10-25 所 示 。 NN 
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沼 到 名 剂 黄 洒 沽 集 一 一 加 填 滞 加 号 己 或 由 o 沁 夺 
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图 10-24 选择 【插入 列 】 命 令 图 10-25 选择 【插入 列 】 命 令 


(3) 将 光标 移动 到 要 插入 列 的 右边 一 列 ， 按 
Ctrl+Shift+A 组 合 键 ， 即 可 插入 列 ， 如 图 10-26 所 示 。 
@ . 在 插入 列 时 ， 表 格 的 宽度 不 会 改变 ， 
中间 随 着 列 数 的 增加 ， 列 的 宽度 则 会 相应 地 
减 小 。 


10.4.3 ”案例 9 一 一 删除 行 、 列 、 单 元 格 


要 删除 行 或 列 ， 可 以 进行 以 下 几 种 操作 。 10-26 插入 列 
(1) 选 定 要 删除 的 行 或 列 ， 按 Delete 键 即 可 删除 。 























Sn 使 用 Delete 键 可 以 删除 多 行 或 多 列 ， 但 不 能 删除 所 有 的 行 或 列 。 如 果 要 删 
以 除 整个 表格 ， 则 需要 先 选 中 整个 表格 ， 然 后 按 Delete 键 即 可 删除 。 


(2) 将 光标 放置 在 要 删除 的 行 或 列 中 ， 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【表格 】 一 【 删 
除 行 】 或 【删除 列 】 命 令 ， 即 可 删除 行 或 列 ， 如 图 10-27 所 示 。 
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NN 10-27 ”选择 【删除 行 】 或 【删除 列 】 命 令 


和 可 以 出 除 所 有 的 行 或 列 ， 但 不 能 同时 删除 多 行 或 多 列 。 
A 





10.4.4 ”案例 10 一 一 剪 切 、 复 制 和 粘贴 单元 格 


1. 剪 切 单元 格 


移动 单元 格 可 使 用 【 剪 切 】 和 【粘贴 】 命 令 来 完成 。 移 动 单元 格 的 具体 操作 步骤 如 下 。 

EEIDp 选中 要 移动 的 一 个 或 多 个 单元 格 ， 如 图 10-28 所 示 。 

本 TY 选择 【编辑 】 一 【 剪 切 】 命 令 ， 可 将 选中 的 一 个 或 多 个 单元 格 从 表格 中 剪 切 出 
来 ， 如 图 10-29 所 示 。 

ES 将 光标 置 于 需要 粘贴 单元 格 的 位 置 ， 选 择 【 编 辑 】 一 【粘贴 】 命 令 即 可 ， 如 
图 10-30 所 示 。 
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| se | 过 性 咎 了 (S)- carshifV | 
图 10-28 选中 单元 格 图 10-29 选择 【 剪 切 】 命 令 图 10-30 ”粘贴 单元 格 


sm 所 有 被 选中 的 单元 格 必须 是 连续 的 且 形 成 的 区 域 呈 答 形 才能 被 剪 切 或 复制 。 对 于 
人 人” 表格 中 的 某 些 行 或 列 ， 使 用 【和 剪 切 】 命 令 可 将 所 选中 的 行 或 列 删 除 ， 否 则 仅 删除 单元 
格 中 的 内 容 和 格式 。 


2. 复制 和 粘贴 单元 格 


要 粘贴 多 个 单元 格 ， 剪 贴 板 的 内 容 必 须 和 表格 的 格式 保持 一 致 。 复 制 、 粘 贴 单 元 格 的 具 
体操 作 步 骤 如 下 。 
国 于 DY 选中 要 复制 的 单元 格 ， 选 择 【 编 辑 】 一 【拷贝 】 命 令 ， 如 图 10-31 所 示 。 
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ECSRPD 将 光标 置 于 需要 粘贴 单元 格 的 位 置 ， 选 择 【编辑 】 一 【粘贴 】 命 令 即 可 ， 如 
图 10-32 所 示 。 
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选择 性 类 贴 [S)… 


图 10-31 选择 【拷贝 】 命 令 图 10-32 ”粘贴 单元 格 


10.4.5 ”案例 11 一 一 合并 和 拆 分 单元 格 


1. 合并 单元 格 


沼 到 名 剂 黄 洒 酒 集 一 一 名 计 滞 加 号 己 或 ” 山 01 小 音 


只 要 选择 的 单元 格 区 域 是 连续 的 矩形 ， 就 可 以 对 单元 格 进行 合并 操作 ， 生 成 一 个 跨 多 行 
或 多 列 的 单元 格 ， 否 则 将 无 法 合并 。 

合并 单元 格 的 具体 操作 步骤 如 下 。 

EEC 在 文档 窗口 中 选中 要 合并 的 单元 格 ， 如 图 10-33 所 示 。 


台新 闻 柚 讯 
































图 10-33 ”选中 要 合并 的 单元 格 


EEOR29 执行 下 列 任意 一 种 操作 即 可 合并 单元 格 。 

(1) 选择 【修改 】 一 【表格 】 一 【合并 单元 格 】 命 令 ， 如 图 10-34 所 示 。 

(2) 单 击 【属性 】 面 板 中 的 【合并 单元 格 】 按 钮 回 。 

(3) 右 击 并 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【合并 单元 格 】 命 令 。 

合并 完成 后 ， 合 并 前 各 单元 格 中 的 内 容 将 放 在 合并 后 的 单元 格 里 面 ， 如 图 10-35 所 示 。 
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图 10-34 选择 【合并 单元 格 】 命 令 图 10-35 合并 之 后 的 单元 格 
2. 拆 分 单元 格 
拆 分 单元 格 是 将 选中 的 单元 格 拆 分 成 行 或 列 。 拆 分 单元 格 的 具体 操作 步骤 如 下 。 
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将 光标 放置 在 要 拆 分 的 单元 格 中 或 选中 一 个 单元 格 ， 如 图 10-36 所 示 。 





如 帮 邮资 计 


2 | 
数学 性 物 | 
英语 开学 | 
地 理 EE | 
扬中 美森 | 


10-36 ”选中 要 拆 分 的 单元 格 


EEI2 执行 下 列 任意 一 种 操作 即 可 实现 拆 分 单元 格 。 

(1) 选择 【修改 】 一 【表格 】 一 【 拆 分 单元 格 】 命 令 。 

(2) 单 击 【 属 性 】 面 板 中 的 【 拆 分 单元 格 】 按 钮 a6 

(3) 右 击 并 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【 拆 分 单元 格 】 命 令 。 

EC 弹出 【 拆 分 单元 格 】 对 话 框 ， 在 【把 单元 格 拆 分 】 栏 中 可 选中 【 行 】 或 【 列 】 
单 选 按钮 ， 在 【 行 数 】 或 【 列 数 】 微 调 框 中 可 以 输入 要 拆 分 成 的 行 数 或 列 数 ， 如 
图 10-37 所 示 。 

EC 单 击 【确定 】 按 钮 ， 即 可 拆 分 单元 格 ， 如 图 10-38 所 示 。 
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图 10-37 【 拆 分 单元 格 】 对 话 框 图 10-38 拆 分 后 的 单元 格 


10.5 ”操作 表格 数据 
在 制作 网 页 时 ， 可 以 使 用 表格 来 布局 页 面 。 使 用 表格 时 ， 在 表格 中 既 可 以 输入 文字 ， 也 


可 以 插入 图 像 ， 还 可 以 插入 其 他 网 页 元 素 。 在 网 页 的 单元 格 中 还 可 以 嵌 套 一 个 表格 ， 这 样 就 
可 以 使 用 多 个 表格 来 布局 页 面 。 


10.5.1 案例 12 一 一 在 表格 中 输入 文本 


在 需要 输入 文本 的 单元 格 中 单 击 ， 即 可 在 表格 中 输入 文本 。 单 元 格 在 输入 文本 时 可 以 自 
动 扩展 ， 如 图 10-39 所 示 。 
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10-39 在 单元 格 中 输入 文本 
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10.5.2 ”案例 13 一 一 在 表格 中 插入 图 像 


在 表格 中 插入 图 像 是 制作 网 页 过 程 中 常见 的 操作 之 一 。 具 体操 作 步 又 如 下 。 

EEJDp 将 光标 放置 在 需要 插入 图 像 的 单元 格 中 ， 如 图 10-40 所 示 。 

EECRP9 单 击 【插入 】 面 板 的 【常用 】 选 项 卡 中 的 【图 像 】 按 钮 ， 或 选择 【插入 】 一 
【图 像 】 命 令 ; 或 从 【插入 】 面 板 中 拖 动 【图 像 】 按 钮 到 单元 格 中 ， 如 图 10-41 所 示 。 
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图 10-40 ”选中 要 插入 图 像 的 单元 格 图 10-41 【常用 】 选 项 卡 





EECIep 打开 【选择 图 像 源 文件 】 对 话 框 ， 在 其 中 选择 需要 插入 表格 中 的 图 片 ， 如 
图 10-42 所 示 。 
EEC 单 击 【确定 】 按 钮 ， 即 可 将 选中 的 图 片 添加 到 表格 之 中 ， 如 图 10-43 所 示 。 
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图 10-42 【选择 图 像 源 文件 】 对 话 框 图 10-43 在 表格 中 插入 图 片 


10.5.3 ”案例 14 一 一 表格 中 的 数据 排序 


表格 中 的 排序 功能 主要 是 针对 具有 格式 的 数据 表格 ， 是 根据 表格 列表 中 的 数据 来 排序 
的 。 具 体操 作 步 又 如 下 。 
ED 选中 要 排序 的 表格 ， 如 图 10-44 所 示 。 
EEJPDD 选择 【命令 】 一 【排序 表格 】 命 令 ， 打 开 【 排 序 表格 】 对 话 框 ， 在 其 中 可 以 根 
据 需 要 对 表格 的 排序 参数 进行 设置 ， 如 图 10-45 所 示 。 
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口 完成 排序 后 所 有 行 颜色 保持 不 认 





图 10-44 ”选中 要 排序 的 表格 图 10-45 【排序 表格 】 对 话 框 
ES 单 击 【确定 】 按 钮 ， 即 可 完成 对 表格 的 排序 。 本 例 是 按照 表格 的 第 4 列 数 字 的 
降序 进行 排列 的 ， 如 图 10-46 所 示 。 
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10-46 ”排序 完成 后 的 表格 
10.5.4 ”案例 15 一 一 导入 Excel 表格 数据 


在 编辑 表格 的 过 程 中 ， 用 户 可 以 将 Excel 表格 中 的 数据 直接 导入 到 Dreamweaver CC 之 
中 ， 从 而 方便 用 户 引 用 数据 。 导 入 Excel 数据 的 具体 操作 步骤 如 下 。 


EC 启动 Dreamweaver CC， 新 建 一 个 网 页 文档 ， 将 光标 定位 在 编辑 窗口 中 ， 如 图 10-47 
所 示 。 


EC 选择 【文件 ) 一 【导入 】 一 【Excel 文 档 】 命 令 ， 如 图 10-48 所 示 。 
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图 10-47 新建 空 白文 档 图 10-48 选择 【Excel 文档 】 命 令 
ECDIS 弹出 【导入 Excel 文档 】 对 话 框 ， 在 其 中 选择 准备 导入 的 Excel 文档 ， 如 图 10-49 
所 示 。 
EC 单 击 【打开 】 按 钮 ， 即 可 将 Excel 文档 中 的 数据 导入 到 网 页 之 中 ， 如 图 10-50 
所 示 。 
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图 10-49 选择 要 导入 的 Excel 文 档 图 10-50 导入 Excel 文 档 员 


10.6 ”综合 案例 一 一 使 用 表格 布局 网 页 


使 用 表格 可 以 将 网 页 设计 得 更 加 合理 ， 可 以 将 网 页 元 素 非常 轻松 地 放置 在 网 页 中 的 任何 
位 置 。 有 具体 操作 步骤 如 下 。 
EEC 打开 素材 中 的 chl0\index.htm 文件 ， 将 光标 放置 在 要 插入 表格 的 位 置 ， 如 图 10-51 
所 示 。 
EECDRP9 单 击 【插入 】 面 板 的 【常用 】 选 项 卡 中 的 【表格 】 按 钮 。 弹 出 【表格 】 对 话 
框 ， 将 【 行 数 】 和 【 列 】 均 设置 为 2，【 表 格 宽度 】 设 置 为 100%，【 边 框 粗细 】 设 
置 为 0，【 单 元 格 边 距 】 设 置 为 0，【 单 元 格 间 距 】 设 置 为 0， 如 图 10-52 所 示 。 
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图 10-51 打开 素材 文件 图 10-52 【表格 】 对 话 框 


攻 BY 单 击 【 确 定 】 按 钮 ， 一 个 2 行 2 列 的 表格 就 插入 到 了 页 面 中 ， 如 图 10-53 所 示 。 

EC 将 光标 放置 在 第 一 行 的 第 一 列 单元 格 中 ， 单 击 【 插 入 】 面 板 的 【常用 】 选 项 卡 
中 的 【图 像 】 按 钮 ， 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 图 像 文件 ， 如 图 10-54 
所 示 。 

攻 于 BY 单 击 【 确 定 】 按 钮 即 可 插入 图 片 ， 如 图 10-55 所 示 。 
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图 10-53 ”插入 的 表格 10-54 ”选择 要 插入 的 图 片 


EECJDy 将 光标 放置 在 第 二 行 的 第 一 列 单元 格 中 ， 在 【属性 】 面 板 中 将 【背景 颜色 】 设 
置 为 柜 3E3E3， 如 图 10-56 所 示 。 


























函 cuenwmnouwocumenygeisyndechmm ED 

| 

站 

1 

， 

有 Eee 

Nt LE [amas ww MENS 新 闻 中 心 
bots cd ey ei ere eer eet etude cr? Dine 日 十 画 中 sm- a etd ery ct tamer csr eth onl ered 日 而 革 wowsm | 








图 10-55 插入 的 图 片 图 10-56 设置 单元 格 的 背景 色 
本 于 在 单元 格 中 输入 文本 ， 在 【属性 】 面 板 中 设置 文本 的 【大 小 】 为 16 像素 ， 如 
图 10-57 所 示 。 


EGGE 选择 第 二 列 的 两 个 单元 格 ， 在 单元 格 的 【属性 】 面 板 中 单 击 回 按 钮 ， 将 单元 格 
合并 ， 如 图 10-58 所 示 。 
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10-57 ”设置 文本 大 小 10-58 ”合并 选 定 的 单元 格 


EDUD) 选 定 合并 后 的 单元 格 ， 选 择 【 插 入 】 一 【表格 】 命 令 。 弹 出 【表格 】 对 话 框 ， 
将 【 行 数 】 设 置 为 2，【 列 】 设 置 为 1，【 表 格 宽度 】 设 置 为 100%， 【边框 粗 细 】 


设置 为 0，【 单 元 格 边 距 】 设 置 为 0，【 单 元 格 间距 】 设 置 为 0， 如 图 10-59 所 示 。 
EC 单 击 【确定 】 按 钮 ， 一 个 两 行 一 列 的 表格 就 插入 到 了 页 面 中 ， 如 图 10-60 所 示 。 
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图 10-59 设置 单元 格 图 10-60 插入 表格 


ED 将 光标 放置 到 第 一 行 的 单元 格 中 ， 单 击 【 插 入 】 面 板 的 【常用 】 选 项 卡 中 的 【图 
像 】 按 钮 ， 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 图 像 文件 ， 如 图 10-61 所 示 。 
EEC》 单 击 【 确 定 】 按 钮 即 可 插入 图 片 ， 如 图 10-62 所 示 。 
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ECE 重复 上 述 步骤 ， 在 第 二 行 的 单元 格 中 插入 图 片 ， 如 图 10-63 所 示 。 
EE 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 ， 效 果 如 图 10-64 所 示 。 
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10.7 疑难 解 惑 


疑问 1: 如 何 使 用 表格 拼接 图 片 ? 


答 : 对 于 一 些 较 大 的 图 像 ， 读 者 可 以 将 其 切 分 成 几 个 部 分 ， 然 后 利用 表格 把 它们 拼接 到 
一 起 ， 这 样 就 可 以 加 快 图 像 的 下 载 速度 。 

具体 的 操作 方法 是 : 先 用 图 像 处 理工 具 ( 如 Photoshop) 把 图 像 切 分 成 几 个 部 分 (具体 切 图 方 
法 读者 可 以 参照 本 书 中 的 相关 章节 )， 然 后 在 网 页 中 插入 一 个 表格 (其 行列 数 与 切 分 的 图 像 相 
同 )， 在 表格 属性 中 将 边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 设 为 0， 再 把 切 分 后 的 图 像 按 照 
原来 的 位 置 关 系 插入 相应 的 单元 格 中 即 可 。 


疑问 2: 导入 到 网 页 中 的 数据 混乱 怎么 办 ? 


答 : 一 般 出 现 这 种 数据 混乱 的 情况 是 由 于 全 角 造 成 的 ， 因 为 此 时 记事 本 文件 中 的 符号 为 
全 角 。 用 户 需 要 重新 将 记事 本 中 的 全 角 符 号 修改 为 半角 符号 ， 即 修改 为 英文 状态 下 输入 ， 然 
后 导入 到 网 页 中 即 可 解决 该 数据 问题 。 
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第 11 音 
读 懂 样式 表 密 码 一 一 
使 用 CSS 层 又 
样式 表 


使 用 CSS 技术 可 以 对 文档 进行 精细 的 页 面 美化 。CSS 样式 不 仅 可 以 对 单个 页 
面 进 行 格式 化 ， 还 可 以 对 多 个 页 面 使 用 相同 的 样式 进行 修饰 ， 以 达到 统一 的 效果 。 
本 章 主 要 介绍 如 何 使 用 CSS 层 司 样式 表 美 化 网 页 。 
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11.1 初 识 CSS 样式 表 


CSS 层 登 样式 表 是 一 种 重要 的 网 页 设计 语言 ， 其 作用 是 定义 各 种 网 页 标签 的 样式 属性 ， 
从 而 丰富 网 页 的 表现 力 。 此 外 ， 使 用 层 登 样式 表 ， 可 以 让 样式 和 代码 分 离开 来 ， 让 整个 网 页 
代码 更 清晰 。 


11.1.1 什么 是 CSS 


CSS(Cascading Style Sheet)， 中 文 名 为 层 合 样式 表 ， 也 可 以 被 称 为 CSS 样式 表 或 样式 表 ， 
其 文件 扩展 名 为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 ， 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 
一 种 标记 性 语言 。 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离 ， 从 而 使 网 页 设 
计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 ， 可 以 将 整个 站 点 上 的 所 有 网 页 都 指向 某 
个 CSS 文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 生 
相同 的 改变 。 如 图 11-1 所 示 为 Dreamweaver CC 的 代码 窗口 ， 在 其 中 可 以 查看 相应 的 CSS 
代码 。 
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content:""; 
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height: 101%; 
} 
body { 
background:#fff; 
height: 160%; 
padding:65 
vertical-align: top; 
¥ ~ 

















11-1 Dreamweaver CC 的 代码 窗口 


11.1.2 CSS 的 3 种 类 型 
CSS 的 定义 类 型 主要 有 3 种 ， 分 别 是 自 定义 的 CSS、 重 定义 标签 的 CSS 和 伪 类 及 伪 对 象 。 


1. 自 定义 的 CSS 
自 定义 的 CSS 就 是 根据 需要 自行 定义 的 样式 名 称 。 如 图 11-2 所 示 的 自 定义 的 #facebox 样 
式 就 是 自 定义 的 CSS 样式 。 


2. 重 定义 标签 的 CSS 
重 定义 标签 样式 即 对 现 有 的 HTML 标签 样式 进行 样式 的 重 定义 。 图 11-3 所 示 为 重 定义 的 
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<ul> 标 签 的 样式 。 





动 ce gngd psc mente EE common cs -Ox 
Tont-style: inherit; 
















































图 11-2 自 定义 的 CSS 11-3” 重 定义 标签 的 CSS 


六 站 六 午 邢 SSO 洒 户 一 一 并 遇 洒 上 央 菲 态 球 出 上 外 鱼 








3, 伪 类 及 伪 对 象 te EE 

css 中 有 一 些 比较 特殊 的 属性 ， 称 之 为 伪 上 国 > 
类 ， 常 见 的 伪 类 有 :link 、 :hover 、 :first- 
child; :active 、:focus 等 。 如 图 11-4 所 示 为 
CSS 中 的 伪 类 对 象 。 


11.1.3 CSS 的 语法 格式 


CSS 样式 表 由 若干 条 样式 规则 组 成 。 这 些 
样式 规则 可 以 应 用 到 不 同 的 元 素 或 文档 ， 从 而 
定义 它们 显示 的 外 观 。 每 一 条 CSS 规则 由 3 个 
部 分 构成 : 选择 符 (selector)、 属 性 (properties) 和 属性 值 (value)。 其 语法 格式 如 下 : 

selector{property: value} 

语句 说 明 如 下 。 

(1) selector 选择 符 : 采用 多 种 形式 ， 可 以 为 文档 中 的 HTML 标记 ， 如 <body>、 
<table>、<p> 等 ， 但 是 也 可 以 是 XML 文档 中 的 标记 。 

(2) property 属性 : 是 选择 符 指 定 的 标记 所 包含 的 属性 。 

(3) value: 指定 了 属性 的 值 。 

如 果 定 义 选择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 组 之 间 用 分 号 G) 隔 开 。 其 基 
本 语法 格式 如 下 : 

selector{propertyl: valuel; property2: value2;...} 

下 面 就 给 出 一 条 CSS 样式 规则 : 

p{color:red} 


该 CSS 样式 规则 中 的 选择 符 p， 为 段落 标记 <p> 提 供 样 式 ，color 为 指定 文字 颜色 属性 ; 
red 为 属性 值 。 此 样式 表示 标记 <p> 指 定 的 段落 文字 为 红色 。 


learfix [ 
display:block 


























图 11-4 伪 类 及 伪 对 象 
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如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 下 列 语句 : 


p{font-family:" 素 书 "; color:red; font-size:40px; font-weight:bold} 


11.1.4 ”案例 1 一 一 使 用 Dreamweaver 编写 CSS 


随 着 Web 的 发 展 ， 越 来 越 多 的 开发 人 员 开 始 使 用 功能 更 多 、 界 面 更 友好 的 专用 CSS 编辑 
器 ， 如 Dreamweaver 的 CSS 编辑 器 和 Visual Studio 的 CSS 编辑 器 。 这 些 编辑 器 有 语法 着 色 ， 
带 输入 提示 ， 甚 至 有 自动 创建 CSS 的 功能 ， 因 此 深 受 开发 人 员 喜 爱 。 下 面 介 绍 如 何 使 用 
Dreamweaver CC 编写 CSS 样式 规则 。 

具体 操作 步骤 如 下 。 

ED 使 用 Dreamweaver CC 创建 HTML 文档 ， 然 后 输入 内 容 ， 如 图 11-5 所 示 。 

EDpp 在 【CSS 设计 器 】 面 板 中 单 击 【 添 加 CSS 源 】 按 钮 ， 在 弹出 的 菜单 中 选择 【在 

页 面 中 定义 】 命 令 ， 如 图 11-6 所 示 。 


Er -ox 











渭城 朝 十 泡 轻 尘 ， 客 舍 青 育 柳 色 新 。 劝 君 更 号 一 杯 酒 ， 西 出 阳 
闫 无 故人 。 








图 11-5 ”新建 网 页 文档 11-6 【CSS 设计 器 】 面 板 


EEBp 在 页 面 中 选择 需要 设置 样式 的 对 象 ， 这 里 选择 添加 的 文本 内 容 ， 然 后 在 【 源 】 
栏 中 选择 <style> 选 项 ， 单 击 【 选 择 器 】 栏 中 的 【添加 选择 器 】 按 钮 ， 即 可 在 选择 器 
中 添加 标签 样式 body， 如 图 11-7 所 示 。 

EC 在 【属性 】 栏 中 单 击 【文本 】 按 钮 ， 设 置 color( 颜 色 ) 为 红色 、font-size( 文 字 大 小 ) 
为 x-large， 如 图 11-8 所 示 。 
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CSS 设计 六 
所 有 项 
<style> 
cd ee | =Fro000 
加 fontfamiy 
font-style ; normal 

p font-variant 
bedy font-weight 

一 一 ass : lire 

11-7 ”添加 标签 样式 body 图 11-8 设置 文本 属性 


EEJD9) 在 【属性 】 栏 中 单 击 【 背 景 】 按 钮 ， 设 置 background-color( 背 景 颜色 ) 为 浅黄 
色 ， 如 图 11-9 所 示 。 
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EECSUD 在 页 面 中 即 可 看 到 添加 的 样式 效果 ， 如 图 11-10 所 示 。 
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渭城 朝 雨 泄 轻 尘 ， 客 合 青 青 柳 色 新 。 劝 君 更 尽 一 
杯 酒 ， 西 出 阳 关 无 故人 。 
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图 11-9 设置 背景 颜色 图 11-10 添加 CSS 后 的 效果 


ET 切换 到 代码 视图 中 ， 查 看 添加 的 样式 表 的 具体 内 容 ， 如 图 11-11 所 示 。 
ETE> 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 11-12 所 示 。 
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图 11-11 代码 视图 图 11-12 预览 文件 效果 


Sm 上 面 使 用 Dreamweaver CC 设置 CSS， 只 是 其 中 一 种 方法 。 读 者 还 可 以 直接 在 代 


提示 


鲸 。 码 模式 中 ， 编 写 CSS 代码 ， 此 时 会 有 很 好 的 语法 提示 。 


11.2 CSS 的 使 用 方式 


CSS 样式 表 能 很 好 地 控制 页 面 显示 ， 以 达到 分 离 网 页 内 容 和 样式 代码 的 目的 。CSS 样式 
表 控制 HTML 5 页 面 达到 好 的 样式 效果 ， 其 使 用 方式 通常 包括 行内 样式 、 内 嵌 样 式 、 链 接 样 
式 和 导入 样式 。 


11.2.1 案例 2 一 一 行内 样式 


行内 样式 是 所 有 样式 中 比较 简单 、 直 观 的 方法 ， 就 是 直接 把 CSS 代码 添加 到 HIML 的 标 
记 中 ， 即 作为 HTML 标记 的 属性 标记 存在 。 通 过 这 种 方法 ， 可 以 很 简单 地 对 某 个 元 素 单独 定 
义 样 式 。 
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使 用 行内 样式 方法 是 直接 在 HTML 标记 中 使 用 style 属性 ， 该 属性 的 内 容 就 是 CSS 的 属 
性 和 值 。 例 如 : 


<p style="color:red"> 段 落 样式 </p> 


在 Dreamweaver CC 中 ， 使 用 行内 样式 的 具体 操作 步骤 如 下 。 

EEIDp 新建“ 行内 样式 html” 文 档 ， 在 代码 视图 中 ， 输 入 相关 代码 ， 如 图 11-13 所 示 。 

ESRDy 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 11-14 所 示 ， 可 以 看 到 2 个 p 标记 
中 都 使 用 了 style 属性 ， 并 且 设 置 了 CSS 样式 ， 各 个 样式 之 间 互 不 影响 ， 分 别 显示 自 


己 的 样式 效果 。 第 1 个 段落 设 为 红色 字体 ， 居 中 显示 ， 带 有 下 划 线 。 第 二 个 段落 设 
为 蓝 色 字 体 ， 以 斜体 显示 。 





盖 cvsersiqangupocument VE hom 


ldoctype htmt> 


- OO x 
旧 CUsers\qianou\Do: 只 -上 | @ mt 
文 伯 中。 轴 (E)】 二 看 (V) 收 页 立 /A) 工具 (T) 帮助 (H 





此 段落 使 用 行内 样式 修饰 
正 葡 内 他 




















图 11-13 行内 样式 图 11-14 行内 样式 效果 


尽管 行内 样式 简单 ， 但 这 种 方法 不 常 使 用 ， 因 为 这 样 添加 无 法 完全 发 挥 样 式 表 “内 容 结 
构 和 样式 控制 代码 ”分 离 的 优势 。 而 且 这 种 方式 也 不 利于 样式 的 重用 。 如 果 需 要 为 每 一 个 标 
记 都 设置 style 属性 ， 后 期 维护 成 本 高 ， 网 页 容易 过 胖 ， 故 不 推荐 使 用 。 


11.2.2 ”案例 3 一 一 内 内 样式 


内 嵌 样 式 就 是 将 CSS 样式 代码 添加 到 <head> 与 </head> 之 间 ， 并 且 用 <style> 和 </style> 标 
记 进 行 声明 。 这 种 写法 虽然 没有 实现 页 面 内 容 和 样式 控制 代码 之 间 的 完全 分 离 ， 但 可 以 设置 
一 些 比较 简单 的 样式 ， 并 统一 页 面 样式 。 

代码 如 下 : 


<head> 
<style type="text/css" > 
p 
{ 
color:red; 
font-size:12px; 
} 
</style> 
</head> 


有 些 较 低 版 本 的 浏览 器 不 能 识别 <style> 标 记 ， 因 而 不 能 正确 地 将 样式 应 用 到 页 面 显示 
上 ， 而 是 直接 将 标记 中 的 内 容 以 文本 的 形式 显示 。 为 了 解决 此 类 问题 ， 可 以 使 用 HTML 注释 
将 标记 中 的 内 容 隐藏 。 如 果 浏 览 器 能 够 识别 <style> 标 记 ， 则 标记 内 被 注释 的 CSS 样式 定义 代 


码 依旧 能 够 发 挥 作 用 。 代 码 如 下 : 


<head> 
<style type="text/css" > 
<!-- 
Pp 
{ 
color:red; 
font-size:12px; 
} 
--> 
</style> 
</head> 


在 Dreamweaver CC 中 ， 使 用 内 钳 样 式 的 具体 操作 步骤 如 下 。 

EEC 新建 “内 嵌 样 式 .html” 文 档 ， 在 代码 视图 中 ， 输 入 相关 代码 ， 如 图 11-15 所 示 。 

EERPp 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 11-16 所 示 ， 可 以 看 到 2 个 p 标记 
中 都 被 CSS 样式 修饰 ， 其 样式 保持 一 致 ， 段 落 居中 、 加 粗 并 以 橙色 字体 显示 。 


前 cssqioowpoenereyRaeRhanl -ox 
Ficoctype re 可 
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title> 内 样式 </title> 

eta type="text/css"> 
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站 CUsers\qangu\Dor D - 0 | BE x | 
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此 段落 使 用 内 嵌 样 式 修饰 
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站 IOIDIEEIET IE] 


习 








图 11-15 ”内 赃 样 式 图 11-16 ”内 赃 样 式 效果 


在 上 述 例子 中 ， 所 有 CSS 编码 都 在 style 标记 中 ， 方 便 了 后 期 维护 ， 页 面相 比较 与 行内 样 
式 大 大 瘦身 了 。 但 如 果 一 个 网 站 拥有 很 多 页 面 ， 对 于 不 同 页 面 p 标记 都 希望 采用 同样 风格 
时 ， 内 构 方式 就 显得 有 点 麻烦 了 。 此 种 方法 只 适用 于 特殊 页 面 设置 单独 的 样式 风格 。 


11.2.3 ”案例 4 一 一 链接 样式 


链接 样式 是 CSS 中 使 用 频率 最 高 也 是 最 实用 的 方法 。 它 很 好 地 将 “页 面 内 容 ” 和 “样式 
风格 代码 ”分 离 成 两 个 文件 或 多 个 文件 ， 实 现 了 页 面 框架 HTML 代码 和 CSS 代码 的 完全 分 
离 。 这 样 使 前 期 制作 和 后 期 维护 都 十 分 方便 。 同 一 个 CSS 文件 ， 根 据 需要 可 以 链接 到 网 站 中 
所 有 的 HTML 页 面 上 ， 使 得 网 站 整体 风格 统一 、 协 调 并 且 后 期 维护 的 工作 量 也 大 大 减少 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 ， 然 后 在 页 面 中 通过 
<link> 链 接 标 记 链 接 到 页 面 中 ， 而 且 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 具 体 如 下 : 


<link rel="stylesheet" type="text/css" href="l1.css" /> 


(1) rel 指定 链接 到 样式 表 ， 其 值 为 stylesheet。 
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(2) type 表示 样式 表 类 型 为 CSS 样式 表 。 

(3) href 指定 了 CSS 样式 表 所 在 位 置 ， 此 处 表示 当前 路 径 下 名 称 为 1.css 文件 。 

这 里 使 用 的 是 相对 路 径 。 如 果 HTML 文档 与 CSS 样式 表 没有 在 同一 路 径 下 ， 则 需要 指定 

样式 表 的 绝对 路 径 或 引用 位 置 。 

在 Dreamweaver CC 中 ， 使 用 链接 样式 的 具体 操作 步骤 如 下 。 

EEC 新 建 “ 链 接 样式 html” 文 要 ， 在 代码 视图 中 ， 输 入 相关 代码 ， 如 图 11-17 所 示 。 

EEJPp 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 ， 在 【页 面 类 型 】 列 表 框 中 选择 CSS 选项 ， 单 击 【创建 】 按 钮 ， 如 图 11-18 所 示 。 
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| Fry 

和 

" 

全 

四 

| 

回 

区 | mi | 
图 11-17 链接 样式 图 11-18 【新 建文 档 】 对 话 框 


EECRB 创建 名 称 为 1.CSS 的 样式 表 文件 ， 输 入 的 内 容 如 图 11-19 所 示 。 
EC 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 11-20 所 示 。 可 以 看 到 ， 标 题 和 段 
落 以 不 同样 式 显示 ， 标 题 居 中 显示 ， 段 落 以 斜体 居中 显示 。 


动 cvsers\qiangu\Documents BRN css a 
itext-align: center;} 

























ms a | 
文 位 (了 妨 名 (F) 吾 看 (V) 收 襄 雪 (A) 工具 (T) 地 助 (H) 
CSS 学 习 
此 民间 朱 历 弛 其 储 式 给 纺 
图 11-19 样式 表 内 容 图 11-20 链接 样式 效果 
链接 样式 的 最 大 优势 就 是 将 CSS 代码 和 HTML 代码 完全 分 离 ， 并 且 同 一 个 CSS 文件 能 


被 不 同 的 HTML 所 链接 使 用 。 


Se 在 设计 整个 网 站 时 ， 可 以 将 所 有 页 面 链接 到 同一 个 CSS 文件 ， 使 用 相同 的 样式 风 
汇 。 格 。 如果 整个 网 站 需要 修改 样式 ， 只 需要 修改 CSS 文件 即 可 。 


11.2.4 ”案例 5 一 一 导入 样式 
导入 样式 和 链接 样式 基本 相同 ， 都 是 创建 一 个 单独 的 CSS 文件 ， 然 后 引入 到 HTML 文件 


中 。 只 不 过 语法 和 运作 方式 有 差别 。 采 用 导入 样式 的 样式 表 ， 在 HTML 文件 初始 化 时 ， 会 被 
导入 到 HTML 文件 内 ， 作 为 文件 的 一 部 分 ， 类 似 于 内 嵌 效 果 。 而 链接 样式 是 在 HTML 标记 需 
要 样式 风格 时 才 以 链接 方式 引入 。 

导入 外 部 样式 表 是 指 在 内 部 样式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 样式 
表 。 例 如 : 


<head> 
<style type="text/css" > 
<!-— 
@import "1l.css" 
--> </style> 
</head> 
导入 外 部 样式 表 相当 于 将 样式 表 导 入 到 内 部 样式 表 中 ， 其 方式 更 有 优势 。 导 入 外 部 样式 
表 必须 在 样式 表 的 开始 部 分 ， 在 其 他 内 部 样式 表 上 面 。 
创建 名 称 为 2.CSS 的 样式 表 文 件 ， 输 入 的 内 容 如 下 : 


hi{text-align:center;color:#0000ff} 

p{font-weight:bolder;text-decoration:underline;font-size:20px;} 

在 Dreamweaver CC 中 ， 使 用 导入 样式 的 具体 操作 步 又 如 下 。 

EEC 新 建 “ 导 入 样式 html” 文 档 ， 在 代码 视图 中 ， 输 入 相关 代码 ， 如 图 11-21 所 示 。 

ERPp 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 11-22 所 示 。 可 以 看 到 ， 标 题 和 段 
落 以 不 同样 式 显 示 ， 标 题 居中 显示 ， 颜 色 为 蓝 色 ， 段 落 以 大 小 20px 并 加 粗 显示 。 





ldoctype henl> 
chtml> 





- 0O x 
国 CNusereqiangupoc -| @ SN 
文件 月。 入 强 (5) 查看 (V) 。 收藏 闪 (A) 工具 (T) 帮助 (H) 


Echead> 
<t1tle> 导 入 样式 </title> 




















: rt CSS 学 习 
国生 此 段落 使 用 导入 样式 修饰 
图 11-21 导入 样式 图 11-22 导入 样式 效果 
导入 样式 与 链接 样式 比较 ， 最 大 的 优点 就 是 可 以 一 次 导入 多 个 CSS 文件 。 代 码 如 下 : 


<style> 

@import "2.css" 
Q@import "test.css" 
</style> 


11.3 CSS 中 的 常用 样式 


在 了 解 了 CSS 的 使 用 方式 与 编写 CSS 样式 规则 的 方法 后 ， 下 面 介绍 如 何 定义 CSS 样式 
中 常用 的 样式 属性 ， 包 括 字体 、 文 本 、 背 景 、 边 框 、 列 表 等 。 
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11.3.1 案例 6 一 一 使 用 字体 样式 


在 HTML 中 ，CSS 字体 属性 用 于 定义 文字 的 字体 、 大 小 、 粗 细 的 表现 等 。 常 用 的 字体 属 
性 包括 字体 类 型 、 字 号 大 小 、 字 体 风格 、 字 体 颜 色 等 。 


1， 控 制 字体 类 型 


font-family 属性 用 于 指定 文字 字体 类 型 ， 如 宋体 、 黑 体 、 隶 书 、Times New Roman 等 ， 
即 在 网 页 中 ， 展 示 字 体 不 同 的 形状 。 有 具体 的 语法 格式 如 下 : 


{font-family : name} 


其 中 ，name 是 字体 名 称 ， 按 优先 顺序 排列 ， 以 逗号 隅 开 ， 如 果 字体 名 称 包含 空 格 ， 则 应 
使 用 引号 括 起 。 
新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-23): 


<!DOCTYPE html> 

<html> 

<style type=text/css> 
p{font-family: 黑 体 } 

</style> 

<body> 

<p align=center> 天 行 健 君子 以 自强 不 息 。</p> 
</body> 

</html> 


保存 网 页 文档 为 fontfamily.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-24 所 示 ， 可 以 
看 到 文字 居中 并 以 黑体 显示 。 


<!DOCTYPE htmL> 
<html> 

<style type=text/css> 
p{font-family; 黑 体 } 
“</style> 





i 口 x 
@ 和 C\Users\administrat P ~ © | @ CAUsers\administra... x | 
文件 (有 ] 编 句 (E) ”查看 (V) ”收藏 夫 (A) ”工具 (D) 帮助 (H) 


<body> 
<p align=center> 天 行 健 , 君 了 以 自强 不 息 。</p> 
</body> 

</htmt> 














天 行 健 ， 略 于 以 自强 不 息 。 








图 11-23 ”代码 视图 图 11-24 字 型 显示 
2. 定义 字体 大 小 
在 CSS 规定 中 ， 通 常 使 用 font-size 设置 文字 大 小 。 其 语法 格式 如 下 : 


{font-size : 数值 | inherit | xx-small | x-small | small | medium | large | 
x-large | xx-large | larger | smaller | length} 


其 中 ， 通 过 数值 来 定义 字体 大 小 ， 例 如 用 font-size:10px 的 方式 定义 字体 大 小 为 10 个 像 
素 。 此 外 ， 还 可 以 通过 medium 之 类 的 参数 定义 字体 的 大 小 ， 其 参数 含义 如 表 11-1 所 示 。 


表 11-1 font-size 参数 




















参 数 说 明 
xx-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 小 
x-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 小 
small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 小 
medium 默认 值 。 绝 对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 正 常 
large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 大 
x-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 大 
xx-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 大 
larger 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 增 大 。 使 用 成 比例 的 em 单位 计算 
smaller 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 减 小 。 使 用 成 比例 的 em 单位 计算 
length 百分数 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 其 百分比 取 值 是 基于 父 
对 象 中 字体 的 尺 才 





新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-25): 


<!DOCTYPE html> 
<html> 
<body> 
<div style="font-size:10pt"> 霜 叶 红 于 二 月 花 
<p style="font-size:small"> 和 霜 叶 红 于 二 月 花 </p> 
<p style="font-size:larger"> 霜 叶 红 于 二 月 花 </p> 
<p style="font-size:x-small"> 箱 叶 红 于 二 月 花 </p> 
<p style="font-size:x-larger"> 箱 叶 红 于 二 月 花 </p> 
<p style="font-size:50%"> 箱 叶 红 于 二 月 花 </p> 
<p style="font-size:25pt"> 霜 叶 红 于 二 月 花 </p> 









































</div> 
</body> 
</html> 
保存 网 页 文档 为 font-size.html， 在 下 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-26 所 示 ， 可 以 看 
到 网 页 中 文字 被 设置 成 不 同 的 大 小 ， 其 设置 方式 采用 了 绝对 数值 、 关 键 字 、 百 分 比 等 形式 。 
全 Fe EE 司 CNUsers\qiangu\DocP * 上 ER 
"| 文件 (F) ”篇 名 (E) 得 看 (V) 收藏 去 (A) ”工具 (T) 帮助 (H) 
钉 叶 红 于 二 月 花 内 | 
钉 叶 红 于 二 月 花 
| 刹 叶 红 于 二 月 花 
上 ; 霜 叶 红 于 二 月 花 8 
11-25 ”代码 视图 11-26 ”字体 大 小 显示 
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3.， 定义 字体 风格 
font-style 通常 用 来 定义 字体 风格 ， 即 字体 的 显示 样式 ， 语 法 格式 如 下 : 


font-style : normal | italic | oblique |inherit 


font-style 的 属性 值 有 4 个， 具体 含义 如 表 11-2 所 示 。 
表 11-2 font-style 参数 





S20 





属性 值 含义 
normal 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 
italic 浏览 器 会 显示 一 个 斜体 的 字体 样式 
oblique 将 没有 斜体 变量 的 特殊 字体 ， 浏 览 器 会 显示 一 个 倾斜 的 字体 样式 
inherit 规定 应 该 从 父 元 素 继承 字体 样式 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-27): 


<!DOCTYPE html> 


<html> 
<body> 


<p style="font-style:italic"> 梅 花香 自 苦 寒 来 </p> 
<p style="font-style:normal"> 梅 花香 自 苦 寒 来 </p> 
<p style="font-style:oblique"> 梅 花香 自 苦 寒 来 </p> 


</body> 
</html> 


保存 网 页 文档 为 font-style.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-28 所 示 ， 可 以 看 
到 文字 分 别 显示 不 同 的 风格 ， 如 斜体 。 
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11-27 ”代码 视图 


4. 定义 文字 的 闫 色 
在 CSS 样式 中 ， 通 常 使 用 color 属性 来 设置 颜色 ， 


如 表 11-3 所 示 。 
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11-28 字体 风格 显示 


其 属性 值 通 常 使 用 下 面 的 方式 设 定 ， 


表 11-3 color 属性 值 














属性 值 说 明 

color name 规定 颜色 值 为 颜色 名 称 的 颜色 (如 red) 

hex number 规定 颜色 值 为 十 六 进 制 值 的 颜色 (如 #fF0000) 

rgb number 规定 颜色 值 为 rgb 代码 的 颜色 (如 rgb(255.0.0)) 

inherit 规定 应 该 从 父 元 素 继承 颜色 

hsl number 规定 颜色 值 为 HSL 代码 的 颜色 (如 hs1(0.75%,50%))， 此 为 CSS 3 新 增加 的 颜色 表现 方式 
规定 颜色 值 为 HSLA 代码 的 颜色 (如 hsla(120,50%,50%,1))， 此 为 CSS 3 新 增加 的 颜色 表 

hsla_ number 

= 现 方式 

规定 颜色 值 为 RGBA 代码 的 颜色 (如 rgba(125.10.45.0.53))， 此 为 CSS 3 新 增加 的 颜色 表现 

rgba_number 





方式 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-29): 


<!DOCTYPE html> 


<html> 
<head> 


<style type="text/css"> 

body {color:red} 

hl {color:#00ff£f00} 

P.ex {color:rgb(0,0,255)} 
p.hs{color:hsl (0,75%,50%)} 
p.ha{color:hsla(120,50%,50%,1)} 
p-.ra{color:rgba(125,10,45,0.5)} 


</style> 
</head> 


<body> 


<h1>《 青 玉 案 元 夕 》 </h1> 
<p> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 


</p> 


<p class="ex"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 (该 段落 定义 了 
class="ex"。 该 段落 中 的 文本 是 蓝 色 的 。) </p> 

<p class="hs"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css3 中 的 新 增加 
的 HSL 函数， 构建 颜色 。) </p> 

<p class="ha"> 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css3 中 的 新 增加 
的 HSLA 函数 ， 构 建 颜色 。) </p> 

<p class="ra"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css3 中 的 新 增加 
的 RGBA 函数 ， 构 建 颜色 。) </p> 


</body> 
</html> 


保存 网 页 文档 为 color.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-30 所 示 ， 可 以 看 到 文 


字 以 不 同 颜色 显示 ， 并 采用 了 不 同 的 颜色 取 值 方式 。 
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11-29 ”代码 视图 11-30 ”字体 颜色 属性 显示 


11.3.2 ”案例 7 一 一 使 用 文本 样式 


在 网 页 中 ， 段 落 的 放置 与 效果 的 显示 会 直接 影响 到 页 面 的 布局 及 风格 。CSS 样式 表 提供 
了 文本 属性 来 实现 对 页 面 中 段落 文本 的 控制 。 

1. 设置 文本 的 缩 进 效 果 

CSS 中 的 text-indent 属性 用 于 设置 文本 的 首 行 缩 进 ， 其 默认 值 为 0， 当 属性 值 为 负 值 时 ， 
表示 首 行 会 被 缩 进 到 左边 ， 其 语法 格式 如 下 : 

text-indent : length 

其 中 ，length 属性 值 表示 由 百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 
负 值 。 

新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-31): 


<!DOCTYPE html> 

<html> 

<body> 

<p style="text-indent:10mm"> 

此 处 直接 定义 长 度 ， 直 接 缩 进 。 

</p> 

<p style="text-indent:10%"> 
此 处 使 用 百分比 ， 进 行 缩 进 。 

</p> 

</body> 

</html> 


保存 网 页 文档 为 text-indent.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-32 所 示 ， 可 以 
看 到 文字 以 首 行 缩 进 的 方式 显示 。 

2. 设置 重 直 对 齐 方式 

vertical-align 属性 用 于 设置 内 容 的 垂直 对 齐 方式 ， 其 默认 值 为 baseline， 表 示 与 基线 对 
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齐 ， 其 语法 格式 如 下 : 
{vertical-align: 属 性 值 } 
国 wesw EE 
ody _ Cs 国 cAUsers\qiangu\Doc PD -0 pe 
是 A 文件 (有 编 乱 E) “至 乔 V) 收藏 去 (A) 工具 (T) 孝 动 (H) 
tylerrto rdente Bg"> 比如 直接 定义 长 度 ， 直 按 缩 进 ， 
etl 此 处 使 用 百分比 ， 丢 行 缩 进 。 
/body 
11-31 代码 视图 11-32 ” 缩 进 显示 
vertical-align 属性 值 有 9 个 预 设 值 可 使 用 ， 也 可 以 使 用 百分比 。 这 9 个 预 设 值 和 百分比 的 
含义 如 表 11-4 所 示 。 
表 11-4 _ vertical-align 属性 
属性 值 说 明 

baseline 默认 。 元 素 放置 在 父 元 素 的 基线 上 

sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文本 的 上 标 

top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 

text-top 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 

middle 把 此 元 素 放置 在 父 元 素 的 中 部 

bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 

text-bottom 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 

length 设置 元 素 的 堆肥 顺序 


% 


使 用 line-height 属性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 值 
新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-33): 


<!DOCTYPE html> 
<html> 
<body> 
<p> 
世界 杯 <b style=" font-size:8pt;vertical-align:super">2014</b>! 
中 国 队 <b style="font-size: 8pt;vertical-align: sub">[ 注 ]</b>! 
加 油 ! <img src="1.gif" style="vertical-align: baseline"> 
</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:top"> 
</p> 
<hr/> 
<p ><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-top"> 
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</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:bottom"> 
</p> 
<hr/> 
<p ><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-bottom"> 
</p> 
<p> 
世界 杯 <b style="font-size:8pt;vertical-align:100%">2008</b>! 
中 国 队 <b style="font-size: 8pt;vertical-align: -100%">[ 注 ] </b>! 
加 油 ! <img src="1.gif" style="vertical-align: baseline"> 
</p> 
</body> 
</html> 


保存 网 页 文档 为 vertical-align.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-34 所 示 ， 可 
以 看 到 文字 在 垂直 方向 上 以 不 同 的 对 齐 方式 显示 。 
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11-33 ”代码 视图 11-34 ”垂直 对 齐 显示 


3. 设置 水 平 对 齐 方式 
text-align 属性 用 于 设置 内 容 的 水 平 对 齐 方 式 ， 其 默认 值 为 left( 左 对 齐 )， 其 语法 格式 如 下 : 


{ text-align: sTextAlign } 


text-align 的 属性 值 如 表 11-5 所 示 。 
表 11-5 text-align 属性 


属性 值 说 明 


left | 文本 向 行 的 左边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 开始 边缘 对 齐 














旦 


属性 值 说 明 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-35): 


<!DOCTYPE html> 
<html> 
<body> 
<hl style="text-align: center"> 登 幽 州 台 歌 </h1> 
<h3 style="text-align:left"> 选 自 : </h3> 
<h3 style="text-align:right"> 
<img src="1.gif" /> 
唐诗 三 百 首 </h3> 
<p style="text-align:justify"> 
前 不 见 古 人 
后 不 见 来 者 
(这 是 一 个 测试 ， 这 是 一 个 测试 ， 这 是 一 个 测试 ，) 
</p> 
</body> 
</html> 


保存 网 页 文档 为 textralign.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-36 所 示 ， 可 以 看 
文字 在 水 平方 向 上 以 不 同 的 对 齐 方式 显示 。 
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图 11-35 ”代码 视图 图 11-36 水平 对 齐 显示 
4. 设置 文本 的 行 高 


在 CSS 中 ，line-height 属性 用 来 设置 行 间距 ， 即 行 高 。 其 语法 格式 如 下 : 


line-height : normal | length 
line-height 属性 值 的 具体 含义 如 表 11-6 所 示 。 
表 11-6 line-height 属性 








i | 默认 行 高 ， 即 网 页 文本 的 标准 行 高 
etigth 百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百分比 取 值 是 基 
于 字体 的 高 度 尺寸 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-37): 
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<!DOCTYPE html> 
<html> 
<body> 
<div style="text-indent:1l0mm;"> 
<p style="line-height:50px"> 
世界 杯 (World cup, FIFA World Cup)， 国 际 足 联 世界 杯 ， 世 界 足 球 锦标 赛 是 世界 上 最 高 
水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> <p style="line-height:50%"> 
世界 杯 (World cup, FIFA World Cup)， 国 际 足 联 世 界 杯 ， 世 界 足 球 锦标 赛 是 世界 上 最 高 水 
平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> 
</div> 
</body> 
</html> 


保存 网 页 文档 为 line-height.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-38 所 示 ， 可 以 
看 到 有 上段 文字 重合 在 一 起 ， 即 行 高 设置 较 小 。 
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图 11-37 代码 视图 图 11-38 设 定 文本 行 高 


11.3.3 ”案例 8 一 一 使 用 背景 样式 


背景 是 网 页 设计 时 的 重要 因素 之 一 。 一 个 背景 优美 的 网 页 总 能 吸引 不 少 访问 者 。 使 用 
CSS 的 背景 样式 可 以 设置 网 页 背景 。 

1. 设置 背景 颜色 

background-color 属性 用 于 设 定 网 页 背景 色 ， 其 语法 格式 如 下 : 

{background-color : transparent | color} 

关键 字 transparent 是 个 默认 值 ， 表 示 透 明 。 背 景 颜色 color 设 定 方法 可 以 采用 英文 单词 、 
十 六 进 制 、RGB、HSL、HSLA 和 GRBA。 

新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-39): 


<!DOCTYPE html> 
<html> 
<head> 


<title> 背 景色 设置 </title> 


傅 21 


<head> 
<body style="background-color:PaleGreen; color:Blue"> 
<p> 
background-color 属性 设置 背景 色 ，color 属性 设置 字体 颜色 。 
</p> 
</body> 
</html> 


保存 网 页 文档 为 background-colorhtml， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-40 所 示 ， 
可 以 看 到 网 页 背景 色 显示 为 浅 绿 色 ， 而 字体 颜色 为 蓝 色 。 





- oO x 

半 CAUsers\qiangu\Doc "C0 居 表 县 色 设 于 

文 f#D。 辆 和 6 下 看 收藏 交 A) 工具 (T) 者 助 (H) 
backeround -cclor 属 性 设置 背景 名 ，color 属 性 设置 字体 颜色 。 





<body style="background-color:PaleGreen; 
color:Blue"> | 





oackground-cotor 属 性 设置 少时 色 ，cotor 


属性 设置 字 休 部 色 


六 由 六 肝 牧 SSO 下 让 一 一 宇 直 潮水 亲本 于， 册 1 小 章 








图 11-39 ”代码 视图 图 11-40 设置 网 页 背景 色 


background-color 除 可 以 设置 整个 网 页 的 背景 颜色 外 ， 还 可 以 指定 某 个 网 页 元 素 的 背景 
色 。 例 如 ， 设 置 hl 标题 的 背景 色 ， 设 置 段落 p 的 背景 色 。 
新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-41): 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景色 设置 </title> 

<style> 

hi 
background-color: red; 
color: black; 
text-align:center; 





} 
pt 
background-color:gray’; 
color:blue; 
text-indent:2em; 
| 
</style> 
<head> 
<body > 
<h1> 颜 色 设置 </h1> 
<p> 
background-color 属性 设置 背景 色 ，color 属性 设置 字体 颜色 。 
</p> 
</body> 
</html> 


保存 网 页 文档 为 background-color-1.html， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-42 所 
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示 。 可 以 看 到 ， 网 页 中 标题 区 域 背景 色 为 红色 ， 段 落 区 域 背 景色 为 灰色 ， 并 且 分 别 为 字体 设 










































置 了 不 同 的 前 景色 。 

画 uniuedte = 

加 : 

器 

Ed 7 

Wi 3 

4 = 
加 = te 司 CUsers\qiangu\Doc P - © | @ Bee x 
加 i ink 文件 (六 总 (E) 。 坦 看 (V) 收藏 夫 (A) ”工具 (D) 帮助 (H) 

I 

| “me 

Eeeammre omtamrue， 三- backgiaund<aler 属 性 设置 月 景色 ，coler 属 性 设置 宇 体 颜色 。 
四 二 本 

于 

图 11-41 代码 视图 图 11-42 设置 HTML 元 素 背 景色 


2. 设置 背景 图 片 


background-image 属性 用 于 设 定 标记 的 背景 图 片 ， 通 常情 况 下 ， 在 标记 <body> 中 应 用 ， 
将 图 片 用 于 整个 主体 中 。background-image 语法 格式 如 下 : 


background-image : none | url (url) 


其 默认 属性 是 无 背景 图 片 ， 当 需要 使 用 背景 图 片 时 可 以 用 url 进行 导入 ，url 可 以 使 用 绝 
对 路 径 ， 也 可 以 使 用 相对 路 径 。 
新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-43): 


<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景色 设置 </title> 
<style> 
body{ 
background-image:url (01.jpg) 
} 
</style> 
<head> 
<body > 
<p> 儿 阳 无 限 好 ， 只 是 近 黄昏! </p> 
</body> 
</html> 


保存 网 页 文档 为 background-image.html， 在 IE 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-44 所 
示 。 可 以 看 到 ， 网 页 中 显示 了 背景 图 ， 但 如 果 图 片 大 小 小 于 整个 网 页 大 小 时 ， 此 时 图 片 为 了 
填充 网 页 背景 色 ， 会 重复 出 现 并 铺 满 整个 网 页 。 
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图 11-43 ”代码 视图 图 11-44 设置 背景 图 片 


Ta 在 设 定 背景 图 片 时 ， 最 好 同时 也 设 定 背景 色 ， 这 样 当 背 景 图 片 因 某 种 原因 无 法 正常 
汇 ”显示 时 ， 可 以 使 用 背景 色 来 代替 。 当 然 ， 如 果 正 常 显示 ， 背 景 图 片 会 覆盖 背景 色 的 。 


族 央 芥 畏 癌 SSO 珀 窜 


MAG8 


3. 背景 图 片 重复 


在 CSS 中 可 以 通过 background-repeat 属性 设置 图 片 的 重复 方式 ， 包 括 水 平 重复 、 垂 直 重 
复 和 不 重复 等 。 各 属性 值 说 明 如 表 11-7 所 示 。 


表 11-7 background-repeat 属性 





背景 图 片 水 平和 垂直 方向 都 重复 平 铺 


背景 图 片 水 平方 向 重复 平 铺 
背景 图 片 垂 直方 向 重复 平 铺 
背景 图 片 不 重复 平 铺 





background-repeat 属性 重复 背景 图 片 是 从 元 素 的 左上 角 开 始 平 铺 ， 直 到 水 平 、 垂 直 或 全 部 
都 被 背景 图 片 覆 盖 。 
新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-45): 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 图 片 重复 </title> 

<style> 

body{ 
background-image:url (01.jpg); 
background-repeat:no-repeat; 

} 

</style> 

<head> 

<body > 

<p> 夕 阳 无 限 好 ， 只 是 近 黄 昏 ! </p> 

</body> 

</html> 





屋 
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在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-46 所 示 。 可 以 看 到 ， 网 页 中 显示 背景 图 ， 但 图 片 以 
默认 大 小 显示 ， 而 没有 对 整个 网 页 背景 进行 填充 ， 这 是 因为 代码 中 设置 了 背景 图 不 重复 平 铺 。 


| 





| 国 Gwarpebackoround repes P ~ CO 瑟 SEaFER 
|_ XH RA EEM CHaA IRM We 


专 阳 无 限 好 ， 只 是 近 再 香 ! 





证 





函 unttled- 





<body > 和 
轩 <p? 夕 阳 无 限 好 ， 只 是 近 黄 错 ! </p> 
加 | </body> 

</html> 

















11-45 ”代码 视图 11-46 ”背景 图 不 重复 


同样 可 以 在 上 述 代码 中 ， 设 置 background-repeat 的 属性 值 为 其 他 值 。 例 如 ， 可 以 设置 值 为 
repeat-x， 表 示 图 片 在 水 平方 向 上 平 铺 。 此 时 ， 在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-47 所 示 。 








11-47 水 平方 向 平 铺 


4. 背景 图 片 显 示 


使 用 background-attachment 属性 可 以 设 定 背景 图 片 是 否 随 文档 一 起 滚动 ， 这 样 可 以 使 背 
景 图 片 始终 处 于 视野 范围 内 ， 从 而 避免 出 现 因 页 面 的 滚动 而 消失 的 情况 。 该 属性 包含 两 个 属 
性 值 : scroll 和 fixed， 并 适用 于 所 有 元 素 ， 如 表 11-8 所 示 。 


表 11-8 background-attachment 属性 











属性 值 描 述 
scroll 默认 值 ， 当 页 面 滚动 时 ， 背 景 图 片 随 页 面 一 起 滚动 
fixed 背景 图 片 固定 在 页 面 的 可 见 区 域 里 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-48): 


<!DOCTYPE html> 
<html> 
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出 盟 洒 此 六 说 阁 几 引 直上 


台 


<head> 

<title> 背 景 显示 方式 </title> 

<style> 

body{ 
background-image:url (01.jpg); 
background-repeat:no-repeat; 
background-attachment :fixed; 

} 





pt 
text-indent:2em; 
line-height:30px; 

} 使 
hl{ 用 
text-align:center; 9 
00 
</style> 层 
<head> 到 
<body > 样 
<h1> 兰 享 序 </h1> 式 
<p> 表 


永和 九 年 ， 岁 在 次 (gui) 丑 ， 暮 春之 初 ， 会 于 会 稿 (kuai j1) 山 阴 之 兰亭， 修 视 (xi) 事 也 。 群 贤 毕 
至 ， 少 长 咸 集 。 此 地 有 崇山峻岭 ， 茂 林 修 竹 ， 又 有 清流 激 油 (tuan) ， 映 带 左右 。 引 以 为 流 盘 (shang) 
gm) 水 ， 列 坐 其 次 ， 虽 无 丝竹 管弦 之 盛 ， 一 筋 (shang) 一 咏 ， 亦 足以 畅 叙 幽 情 。 

</p> 

<p> 是 日 也 ， 天 朗 气 清 ， 惠 风 和 畅 。 仲 观 宇宙 之 大 ， 俯 察 品 类 之 盛 ， 所 以 游 目 驮 (ché&ng) 怀 ， 足 以 极 视 
听 之 娱 ， 信 可 乐 也 。</p> 

<p> 夫人 之 相 与 ， 俯 仰 一 世 。 或 取 诸 怀抱 ， 旺 言 一 室 之 内 ;， 或 因 寄 所 托 ， 放 浪 形 骸 (h6i) 之 外 。 虽 趣 
(qdi) 舍 万 殊 ， 静 躁 不 同 ， 当 其 欣 于 所 遇 ， 暂 得 于 已 ， 快 然 自足 ， 不 知 老 之 将 至 。 及 其 所 之 既 倦 ， 情 随 
事 迁 ， 感 慨 系 (xi ) 之 矣 。 向 之 所 欣 ， 俯 仰 之 间 ， 已 为 陈 迹 ， 犹 不 能 不 以 之 兴 怀 。 况 修 短 随 化 ， 终 期 于 
尽 。 古 人 云 : “死生 亦 大 矣 。” 岂 不 痛 哉 ! </p> 

<p> 每 览 昔 人 兴 感 之 由 ， 若 合 一 契 ， 未 尝 不 临 文 唆 (jis) 悼 ， 不 能 喻 之 于 怀 。 固 知 一 死生 为 虚 诞 ， 齐 彭 
将 (shing) 为 亡 作 。 后 之 视 今 ， 亦 犹 今 之 视 昔 ， 悲 夫 ! 故 列 叙 时 人 ， 录 其 所 述 。 虽 世 殊 事 异 ， 所 以 兴 
怀 ， 其 致 一 也 。 后 之 览 者 ， 亦 将 有 感 于 斯 文 。</p> 

</body> 

</html> 


在 正 11.0 浏览 器 中 浏览 ， 效果 如 图 11-49 所 示 。 可 以 看 到 ， 网 页 background-attachment 属 
性 的 值 为 fixed 时 ， 背 景 图 片 的 位 置 固定 并 不 是 相对 于 页 面 的 ， 而 是 相对 于 页 面 的 可 视 范 围 的 。 
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background-repeat: 





background-attach 





text-indent:2en; 
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图 11-48 ”代码 视图 图 11-49 背景 图 片 显示 方式 
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5. 背景 图 片 位 置 


使 用 background-position 属性 可 以 指定 背景 图 片 在 页 面 中 所 处 的 位 置 。background- 
position 的 属性 说 明 如 表 11-9 所 示 。 


表 11-9 background-position 属性 














属性 值 描 述 

len 设置 图 片 与 边 距 水 平 与 垂直 方向 的 距离 长 度 ， 后 跟 长 度 单 位 cm、mm、px 等 ) 

Percentage 以 页 面 元 素 框 的 宽度 或 高 度 的 百分比 放置 图 片 

top 背景 图 片 项 部 居中 显示 

center 背景 图 片 居中 显示 

bottom 背景 图 片 底部 居中 显示 

left 背景 图 片 左 部 居中 显示 

right 背景 图 片 右 部 居中 显示 

Br 垂直 对 齐 值 还 可 以 与 水 平 对 齐 值 一 起 使 用 ， 从 而 决定 图 片 的 垂直 位 置 和 水 平 

AS 位 置 。 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-50): 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 位 置 设 定 </title> 

<style> 

body{ 
background-image:url (01.jpg); 
background-repeat:no-repeat; 
background-position:top right; 

} 

</style> 

<head> 

<body > 

</body> 

</html> 


在 正 11.0 浏览 器 中 浏览 ,效果 如 图 11-51 所 示 。 可 以 看 到 ， 网 页 中 显示 了 背景 ， 其 背景 
开始 是 从 顶部 和 右边 开始 。 

使 用 垂直 对 齐 值 和 水 平 对 齐 值 只 能 格式 化 地 放置 图 片 ， 如 果 在 页 面 中 要 自由 地 定义 图 片 
的 位 置 ， 则 需要 使 用 确定 数值 或 百分比 。 此 时 在 上 述 代码 中 ， 将 

background-position:top right; 
语句 修改 为 : 


background-position:20px 30px 


在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-52 所 示 。 可 以 看 到 ， 网 页 中 显示 了 背景 ， 其 背景 
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开始 是 从 左上 角 开 始 ， 但 并 不 是 从 (0,0) 坐 标 位 置 开始 ， 而 是 从 (20,30) 坐 标 位 置 开始 。 
国 Cwampwwwbackc 了- C 于 有 GE a 











画 united-ts = 
1DOCTYPE ha 
<htnl> 









可 


<head> 
<titLez 背 景 位 置 设 定 </citte> 











1[- 国 jk 才 志 村 91: 








11-50 ”代码 视图 11-51 设置 背景 位 置 


订 闭 薪 阱 和 SSO 于 疹 一 一 凋 虹 对 此 共 确 吾 ， 册 1 小 重 


-i 
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Ht) 六 扣 (E) 豆 者 MV) (mslA) 工具) 于 区 站) 














图 11-52 指定 背景 位 置 
11.3.4 “案例 9 一 一 设计 边框 样式 
使 用 CSS 中 的 border-style、border-width 和 border-color 属性 可 以 设 定 边框 的 样式 、 宽 度 
和 颜色 。 
1. 设置 边框 样式 
border-style 属性 用 于 设 定 边框 的 样式 ， 即 风格 ， 主 要 用 于 为 页 面 元 素 添加 边框 。 其 语法 
格式 如 下 : 


border-style : none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset 


CSS 设 定 了 9 种 边框 样式 ， 如 表 11-10 所 示 。 
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表 11-10 边框 样式 
属性 值 描 述 
none 无 边框 ， 无 论 边框 宽度 设 为 多 大 
dotted 点 线 式 边框 
dashed 破 折 线 式 边框 
solid 直线 式 边 框 
double 双 线 式 边框 
groove 槽 线 式 边框 
Tidge 痛 线 式 边框 
inset 内 媒 效 果 的 边框 
outset 突起 效果 的 边框 





新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-53): 


<!DOCTYPE html> 
<html> 
<head> 
<title> 边 框 样式 </title> 
<style> 
be 
border-style:dotted; 
color: black; 
text-align:center; 
} 
pt{ 
border-style:double; 
text-indent :2em; 
</style> 
<head> 
<body > 
<h1> 带 有 边框 的 标题 </h1> 
<p> 带 有 边框 的 段落 </p> 
</body> 
</html> 


在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-54 所 示 。 可 以 看 到 ， 标 题 Hl 显示 的 时 候 ， 带 有 
边框 ， 其 边框 样式 为 点 线 式 边框 ， 同 样 ， 段 落 也 带 有 边框 ， 其 边框 样式 为 双 线 式 边框 。 


2. 设置 边框 颜色 
border-color 属性 用 于 设 定 边框 颜色 。 如 果 不 想 与 页 面 元 素 的 颜色 相同 ， 则 可 以 使 用 该 属 
性 为 边框 定义 其 他 颜色 。border-color 属性 的 语法 格式 如 下 : 


border-color : color 


其 中 color 表示 指定 颜色 ， 其 颜色 值 通过 十 六 进 制 和 RGB 等 方式 获取 。 
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图 11-53 ”代码 视图 图 11-54 设置 边框 
新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-55): 


<!DOCTYPE html> 
<html> 
<head> 
<title> 设 置 边框 颜色 </title> 
<style> 
pl 
border-style:double; 
border-color:red; 
text-indent:2em; 
</style> 
<head> 
<body > 
<p> 边 框 颜 色 设置 </p> 
<p style="border-style:solid; border-color:red blue yellow green"> 
分 别 定义 边框 颜色 
</p> 
</body> 
</html> 


在 下 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-56 所 示 。 可 以 看 到 ， 第 一 个 段落 边框 颜色 设置 为 
红色 ， 第 二 个 段落 边框 颜色 分 别 设置 为 红 、 蓝 、 黄 和 绿 。 
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11-55 ”代码 视图 11-56 ”设置 边框 颜色 
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3. 设置 边框 线 宽 
在 CSS 中 ， 可 以 通过 设 定 边框 宽带 来 增强 边框 效果 。border-width 属性 就 是 用 来 设 定 边框 
宽度 的 ， 其 语法 格式 如 下 : 


border-width : medium | thin | thick | length 


其 中 预 设 有 3 种 属性 值 : medium、thin 和 thick， 另 外 还 可 以 自行 设置 宽度 (width)， 如 
表 11-11 所 示 。 


表 11-11 border-width 属性 





属性 值 描 述 
medium 默认 值 ， 中 等 宽度 
thin 比 medium 细 
thick 比 medium 粗 
len 自 定义 宽度 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-57): 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 边 框 宽度 </title> 

<head> 

<body > 
<p style="border-style:dotted; border-width:medium; "> 边框 宽度 设置 </p> 
<p style="border-style:dashed;border-width:thin;"> 边 框 宽度 设置 </p> 
<p style="border-style:solid; border-width:12px;"> 

分 别 定义 边框 宽度 
</p> 
</body> 
</html> 


在 下 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-58 所 示 ， 可 以 看 到 ，3 个 段落 边框 以 不 同 的 粗细 
显示 。 


函 cNuewrapreuvpocumenevsaossuborderwiath 因 性 hen EC 
<1DOCTYPE htnty 本 
htnl> 











2 | 
: Pew - 0O x 
本 半 cAUsers\qiangu\Doc 只 - C | 大 设置 边框 帘 度 


Pe 文件 (有 纺 沪 (E) 可 看 (V) ”收藏 只 (A) 工具 (Tm) 帮助 (H) 
Pe 





图- 
style="border -style: otted; border-widthoediun 
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11-57 ”代码 视图 11-58 ”设置 边框 线 宽 


S 224 


4. 设置 边框 复合 属性 
border 属性 集合 了 上 述 所 介绍 的 3 种 属性 ， 为 页 面 元 素 设 定 边框 的 宽度 、 样 式 和 颜色 。 
语法 格式 如 下 : 


border : border-width || border-style || border-color 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-59): 


<!DOCTYPE html> 
<html> 
<head> 
<title> 边 框 复合 属性 设置 </title> 
<head> 
<body > 
<p style="border:dashed red 12px"> 边 框 复合 属性 设置 </p> 
</body> 
</html> 


在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-60 所 示 。 可 以 看 到 ， 段 落 边 框 样式 以 破 折线 显 
示 、 颜 色 为 红色 、 宽 度 为 12 像素 。 




















<!DOCTYPE html> 
Ee <htmL> a 口 x 
SE -head> ee = 
<title> 边 框 复合 属性 设置 </title> 司 GUsers\qiangu\Doc ”0C | 乱 边 杠 要 合 民 性 设置 
闭 <head> 文件 (及 (E) 重 看 (V) 收藏 只 (A】 工具 (帮助 0H) 
body > 
营 <p style="border:dashed red 12px"> dee 
六 合 | </p> 
| ee [| 
由 </html> 
¥ 
图 11-59 代码 视图 图 11-60 设置 边框 复合 属性 


11.3.5 “案例 10 一 一 设置 列表 样式 

在 网 页 设计 中 ， 项 目 列表 用 来 罗列 显示 一 系列 相关 的 文本 信息 ， 包 括 有 序 、 无 序 和 自 定 
义 列 表 等 。 当 引入 CSS 后 ， 就 可 以 使 用 CSS 来 设置 项 目 列表 的 样式 了 。 

1. 设置 无 序列 表 


无 序列 表 <ul> 是 网 页 中 常见 元 素 之 一 ， 使 用 <li> 标 记 罗列 各 个 项 目 ， 并 且 每 个 项 目前 面 都 
带 有 特殊 符号 ， 如 黑色 实心 圆 等 。 在 CSS 中 ， 可 以 通过 list-style-type 属性 来 定义 无 序列 表 前 
面 的 项 目 符号 。 对 于 无 序列 表 ， 其 语法 格式 如 下 : 


list-style-type : disc | circle | square | none 


其 中 list-style-type 参数 值 含义 如 表 11-12 所 示 。 
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表 11-12 无 序列 表 常 用 符号 











不 使 用 任何 符号 


| 可 以 通过 设置 不 同 的 参数 值 ， 为 list-style-type 设置 不 同 的 特殊 符号 ， 从 而 改变 无 


提 不 


鲜 序 列表 的 样式 。 
新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-61): 


<!DOCTYPE html> 

<html> 

<head> 
<title> 设 置 无 序列 表 </title> 
<style> 

| 





margin:0px; 
padding:0px; 
font-size:12px; 
|] 
:| 
margin:5px 0 0 Spx; 
Color:#3333FF; 
font-size:14px; 
font-family:" 幼 圆 "; 
} 
Qivi 
width:300px; 
margin:1l0px 0 0 1l0px; 
border:lpx #FF0000 dashed; 
Qiv ul 1{ 
margin-left:40px; 
list-style-type: disc; 
. 


div li { 
margin:5px 0 Spx 0; 
color:blue; 
text-decoration:underline; 
} 
</style> 
</head> 
<body> 
<div class="big01"> 
<p> 娱 乐 焦点 </p> 
<ul> 


<1i> 换 季 肌 凉 “ 公 主 病 ” 美 肤 急 救 快 登场 </1i> 


Ee 


<1i> 来 自 12 星座 的 你 认 淮 旱 门 轻松 瘦 </1i> 
<1i> 男 人 30“ 豆 腐 渣 ” 如 何 延 缓 肌肤 衰老 </1i> 
<1i> 打 造 天 生 美 肌 名 媛 爱 物 强 K 性 价 比 ! </1i> 
<1i> 夏 裙 又 有 新 花样 拼接 图 案 最 时 艇 </1i> 
</ul> 

</div> 

</body> 

</html> 


在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-62 所 示 。 可 以 看 到 ， 页 面 中 显示 了 一 个 导航 栏 ， 
导航 栏 中 存在 着 不 同 的 导航 信息 ， 每 条 导航 信息 前 面 都 是 使 用 实心 圆 作为 每 行 信息 的 开始 。 
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margin:Spx 9 9 Spx; 
color: #3333FF; 


font-size: 14px; 
font-family:" 划 国 "; 




















加 i 
四 2 border :lpx #FF6966 dashed; "| 

图 11-61 代码 视图 图 11-62 用 无 序列 表 制作 导航 菜单 
2. 设置 有 序列 表 


利用 有 序列 表 标记 <ol> 可 以 创建 具有 顺序 的 列表 ， 如 每 条 信息 前 面 加 上 1、2、3、4 等 。 
如 果 要 改变 有 序列 表 前 面 的 符号 ， 同 样 需要 利用 list-style-type 属性 ， 只 不 过 属性 值 不 同 。 
对 于 有 序列 表 ，list-style-type 的 语法 格式 如 下 : 


list-style-type : decimal | lower-roman | upper-roman | lower-alpha | 
upper-alpha | none 


list-style-type 属性 各 参数 值 含 义 如 表 11-13 所 示 。 
表 11-13 有 序列 表 常用 符号 

















参 数 说 明 
decimal 阿拉 伯 数 字 圆 
lower-roman 小 写 罗马 数字 
upper-roman 大 写 罗马 数字 
lower-alpha 小 写 英文 字母 
er-alpha 大 写 英文 字母 
none 不 使 用 项 目 符号 


新 建 空白 网 页 文档 ， 在 代码 视图 中 ， 输 入 以 下 内 容 ( 见 图 11-63): 


网 
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<!DOCTYPE html> 
<html> 
<head> 
<title> 设 置 有 序列 表 </title> 
<style> 
it 
margin:0px; 
padding:0px; 
font-size:12px; 


pi 
margin:5px 0 0 Spx; 
Color:#3333FF; 
font-size:14px; 
font-family:" 幼 圆 "; 
border-bottom-width:1px; 
border-bottom-style:solid; 








3 
div{ 
width:300px; 
margin:1l0px 0 0 10px7 
border:lpx #F9B1C9 solid; 
和 
diyv ooLt 
margin-left:40px; 
list-style-type: decimal; 


be 
margin:5px 0 Spx 0; 
color:blue; 
. 
</style> 
</head> 
<body> 
<div class="big"> 
<p> 娱 乐 焦点 </p> 
<ol> 


<1i> 换 季 肌 闹 “ 公 主 病 ” 美 肤 急 救 快 登场 </1i> 
<1i> 来 自 12 星座 的 你 认 准 日 门 轻松 瘦 </1i> 
<1i> 男 人 30“ 豆 腐 渣 ” 如 何 延缓 肌肤 衰老 </1i> 
<1i> 打 造 天 生 美 肌 名 媛 爱 物 强 k 性价比 ! </1i> 
<1i> 夏 裙 又 有 新 花样 拼接 图 案 最 时 艇 </1i> 
</ol> 

</div> 

</body> 

</html> 


在 正 11.0 浏览 器 中 浏览 ,效果 如 图 11-64 所 示 。 可 以 看 到 ， 页 面 中 显示 了 一 个 导航 栏 ， 
导航 信息 前 面 都 带 有 相应 的 数字 ， 表 示 其 顺序 。 导 航 栏 具有 红色 边框 ， 并 用 一 条 蓝 线 将 题目 
和 内 容 分 开 。 
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图 11-63 代码 视图 图 11-64 ”用 有 序列 表 制作 导航 菜单 EN 
样 
全 在 上 述 代码 中 ， 使 用 list-style-type: decimal 语句 定义 了 有 序列 表 前 面 的 符号 严 。 导 


大 格 来 说 ， 无 论 <ul> 标 记 还 是 <ol> 标 记 ， 都 可 以 使 用 相同 的 属性 值 ， 而 且 效 果 完 全 相 
” ， 同 ， 即 二 者 通过 liststyle-type 可 以 通用 。 


11.4 ”综合 案例 一 一 制作 简单 公司 主页 


打开 各 种 类 型 的 商业 网 站 ， 最 先 映 入 眼帘 的 就 是 首页 ， 也 称 为 主页 。 作 为 一 个 网 站 的 门 
户 ， 主 页 一 般 要 求 版 面 简洁 ， 美 观 大 方 。 结 合 前 面 学 习 的 背景 和 边框 知识 ， 我 们 创建 一 个 简 
单 的 商业 网 站 。 有 具体 操作 步骤 如 下 。 

在 本 案例 中 ， 主 页 包括 了 3 个 部 分 ， 一 是 网 站 Logo; 二 是 导航 栏 ， 三 是 主页 显示 内 容 。 
网 站 Logo 此 处 使 用 了 一 个 背景 图 来 代替 ， 导 航 栏 使 用 表格 实现 ， 内 容 列 表 使 用 无 序列 表 实 
现 。 案 例 完 成 后 的 效果 如 图 11-65 所 示 。 

EEJRPe 构建 基本 HIML。 

为 了 划分 不 同 的 区 域 ，HTML 页 面 需要 包含 不 同 的 div 层 ， 每 一 层 代 表 一 个 内 容 。 一 个 
div 包含 背景 图 ， 一 个 div 包含 导航 栏 ， 一 个 div 包含 整体 内 容 ， 内 容 又 可 以 划分 为 两 个 不 同 
的 层 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 公 司 主页 </title> 

</head> 

<body> 

<center> 

<div> 

<div class="divl" align=center></div> 

<div class=div2> 

<table width=99%><tr align=center><td> 首 页 </td><td> 最 新 消息 </td><td> 产 品 展示 

</td><td> 销 售 网 络 </td><td> 人 才 招 聘 </td><td> 客 户 服务 </td></tr></table> 
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</div> 

<div class=div3> 

<div class=div4> 
<ul> 最 新 消息 

<1i> 公 司 举办 2017 科技 辩论 大 赛 </1i> 
<1i> 企 业 安 全 知识 大 比武 </1i> 
<1i> 优 秀 员工 评比 活动 规则 </1i> 
<1i> 人 才 招 聘 信息 </1i> 
</ul> 

</div> 

<div class=div5> 
<ul> 成 功 案例 

<1i> 上 海 装 修建 材 公 司 </1i> 
<1i> 美 衣服 饰 有 限 公司 </1i> 
<1i> 天 力 科技 有 限 公司 </1i> 
<1i> 美 方 豆 制 品 有 限 公 司 </1i> 
</ul> 

</div> 

</div> 

</div> 

</center> 

</body> 

</html> 


在 下 11.0 浏览 器 中 浏览 ,效果 如 图 11-66 所 示 。 可 以 看 到 ， 在 网 页 中 显示 了 导航 栏 和 两 个 
列表 信息 。 
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Were hr 上 
人 二 ， 公司 举办 2017 科 技 状 论 大 硅 
企业 专 宇 知识 大 比武 
优秀 员工 评比 活动 规则 
招聘 信息 . 
人 
上 淮 扫 如 译作 司 成 功 军 例 
， 类 六 机 志 冯 众 公 司 - 海 
2 : 各 
， 天 力 笠 技 有 限 公司 
姜 方 互 灯 品 有 限 公司 
图 11-65 商业 网 站 主页 11-66 基本 HTML 结构 
SSEIUB) 添加 CSS 代码 ， 设 置 背景 Logo。 代 码 如 下 : 
<style> 
-divli 
height:100px; 
width:820px; 


background-image:url (03.jpg); 

background-repeat:no-repeat; 
background-position:center; 
background-size:cover; 


F 
</style> 


在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-67 所 示 。 可 以 看 到 ， 在 网 页 顶部 显示 了 一 个 背景 


图 ， 此 背景 覆盖 整个 div 层 ， 并 不 重复 ， 并 且 背 景 图 片 居中 显示 。 
EDU 添加 CSS 代码 ， 设 置 导航 栏 。 代 码 如 下 : 


-div2{ 
width:820px; 
background-color:#d2e7ff; 


3 
tablef{ 
font-size:12px; 
font-family:" 幼 圆 "; 
家 


在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-68 所 示 。 可 以 看 到 ， 在 网 页 中 导航 栏 背景 色 为 浅 


蓝 色 ， 表 格 中 字体 大 小 为 12 像素 ， 字 体 类 型 是 幼 圆 。 
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人 人才 招聘 信息 
成 功 守 例 
士 淘 装 修建 村 公司 
冬衣 股评 至 限 公司 
天 力 科技 有 限 公司 
葬 方 百 制 品 有 限 公司 旬 











图 11-67 设置 背景 图 
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最 新 消息 
公司 举办 2017 科 拷 匀 论 大 午 
企业 到 全 知识 大 比 若 
优秀 负 工 评比 活动 规则 
人 才 招 聘 信息 
记功 案例 
上 海 装修 建材 公司 
美衣 服 肇 有 限 公司 
天 力 科技 有 限 公司 
英 方 豆 制 品 有 限 公司 


图 11-68 设置 导航 栏 


EED 添加 CSS 代码 ， 设 置 内 容 样式 。 代 码 如 下 : 


-div3{ 
width:820px; 
height:320px; 
border-style:solid; 
border-color:#ffeedd; 
border-width:10px; 
border-radius:60px; 
-div4f{ 
width:810px; 
height:150px; 
text-align:left; 
border-bottom-width: 2px; 
border-bottom-style:dotted; 
border-bottom-color:#ffeedd; 


. 
-div5{ 
width:810px; 
height:150px; 
text-align:left; 
} 
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在 正 11.0 浏 览 器 中 浏览 ， 效 果 如 图 11-69 所 示 。 可 以 看 到 ， 在 网 页 中 内 容 显示 在 一 个 圆 
角 边 框 中 ， 两 个 不 同 的 内 容 块 中 间 使 用 虚线 隔 开 。 
EEC 添加 CSS 代码 ， 设 置 列表 样式 。 代 码 如 下 : 


ul{ 
Eont-—size:15px? 
font-family: "楷体 "; 


在 正 11.0 浏览 器 中 浏览 ， 效 果 如 图 11-70 所 示 。 可 以 看 到 ， 在 网 页 中 列表 字体 大 小 为 15 
像素 ， 字 型 为 楷体 。 

















图 11-69 ”修饰 边框 图 11-70 ”美化 列表 信息 


11.5 疑难 解 惑 


疑问 1: 滤 镜 效果 是 IE 浏览 器 特有 的 效果 ， 那 么 在 Firefox 中 能 不 能 实现 呢 ? 


答 : 滤 镜 效果 虽然 是 下 浏览 器 特有 的 效果 ， 但 使 用 Firefox 浏览 器 时 ， 一 些 属性 也 可 以 
实现 。 例 如 正 浏览 器 的 阴影 效果 ， 在 Firefox 网 页 设计 中 ， 可 以 先 在 文字 下 面 再 车 一 层 浅 色 
的 同样 的 字 ， 然 后 设置 2 个 像素 的 错位 ， 就 可 以 制造 出 有 阴影 的 假象 。 


疑问 2: 文字 和 图 片 导航 速度 哪 一 个 快 ? 


答 : 使 用 文字 做 导航 栏 速度 最 快 。 文 字 导 航 不 仅 速度 快 ， 而 且 更 稳定 。 比 如 ， 有 些 用 户 
上 网 时 会 关闭 图 片 。 在 处 理 文本 时 ， 不 要 在 普通 文本 上 添加 下 划 线 或 者 颜色 。 除 非特 别 需 
要 ， 和 否则 不 要 为 普通 文字 添加 下 划 线 。 就 像 用 户 需要 识别 哪些 能 点 击 一 样 ， 读 者 不 应 当 将 本 
不 能 点 击 的 文字 误 认 为 能 够 点 击 。 
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第 12 章 
架构 师 的 大 比拼 


一 一 利用 CSS+Div 
布局 网 页 


使 用 CSS 布局 网 页 是 一 种 很 新 的 概念 ， 它 完全 不 同 于 传统 的 网 页 布局 习惯 。 
它 首先 对 页 面 从 整体 上 用 <div> 标 记 进 行 了 分 块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 
后 再 在 各 个 块 中 添加 相应 的 内 容 。 本 章 主 要 介绍 网 页 布局 中 的 一 些 典 型 范例 。 


网 页 设计 与 网 站 建设 
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12.1 认识 并 创建 层 


在 网 页 设计 中 ， 由 于 层 具 有 很 强 的 灵活 性 ， 因 此 被 广泛 应 用 ， 利 用 层 不 仅 可 以 精确 设置 
对 象 所 处 的 位 置 ， 还 能 实现 一 些 简单 的 效果 。 


12.1.1 什么 是 层 
在 Dreamweaver CC 中 ， 层 就 是 Div。Div 元 素 是 用 来 为 网 页 内 容 提 供 结构 和 背景 的 块 元 
素 。Div 的 起 始 标签 和 结束 标签 之 间 的 所 有 内 容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 元 素 的 特 
: 性 由 Div 标签 的 属性 控制 。 
通过 Div 元 素 ， 可 以 把 页 面 分 割 为 独立 的 、 不 同 的 部 分 ， 使 页 面 内 容 结构 化 、 模 块 化 。 
12-1 所 示 为 一 个 页 面 的 整体 架构 。 














页 脚 





图 12-1 页 面 整体 架构 
12.1.2 ”案例 1 一 一 使 用 Dreamweaver 创建 层 


在 Dreamweaver CC 中 ， 用 户 可 以 通过 两 种 方法 来 创建 层 : 一 是 通过 【插入 】 荣 单 下 【 结 
构 】 子 菜单 中 的 Div 命令 来 完成 ， 二 是 通过 【插入 】 面 板 中 的 Div 按钮 来 完成 。 这 两 种 方法 
的 具体 操作 相似 。 下 面 介绍 创建 层 的 具体 操作 步 又 。 

EECDp 启动 Dreamweaver CC， 将 光标 定位 在 需要 插入 层 的 位 置 ， 如 图 12-2 所 示 。 

EEIPp 选择 【插入 】 一 【结构 】 一 Div 命令 ， 如 图 12-3 所 示 。 

EEC) 弹出 【插入 Div】 对 话 框 ， 单 击 【插入 】 右 侧 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 

选择 【在 插入 点 】 选 项 ， 如 图 12-4 所 示 。 

EEC 单 击 【 确 定 】 按 钮 ， 即 可 完成 Div 的 插入 。 保 存 网 页 ， 按 F12 键 进行 页 面 预 

览 ， 在 其 中 可 以 看 到 创建 的 Div 区 域 ， 如 图 12-5 所 示 。 
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图 12-2 定位 插入 层 的 位 置 12-3 选择 Div 命令 
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站 CNUsersWqiangu\Doc 只 - 上 | @ 无 季 村 文档 
文件 (站 ” 闹 纺 (E) 得 看 (V) 收藏 突 (A) 工具 (T) 帮助 (H) 
此 处 显示 新 Div 标签 的 内 容 














图 12-4 【插入 Div】 对 话 框 图 12-5 ”预览 效果 


12.2 Div 层 的 定位 方法 


将 网 页 上 每 个 HIML 元 素 都 认为 是 长 方形 的 盒子 ， 是 网 页 设计 上 的 一 大 创新 。 在 控制 页 
面 方 面 ， 盒 子 模型 有 着 至 关 重 要 的 作用 。 熟 练 掌握 盒子 模型 及 盒子 模型 各 个 属性 ， 是 控制 页 
面 中 每 个 HTML 元 素 的 前 提 。 


12.2.1 盒子 模型 的 概念 


在 CSS 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 合子。 盒子 模型 是 由 margin( 边 
界 )、border( 边 框 )、padding( 空 白 ) 和 content( 内 容 ) 几 个 属性 组 成 。 此 外 在 盒子 模型 中 ， 还 具备 
高 度 和 宽度 两 个 辅助 属性 。 盒 子 模型 如 图 12-6 所 示 。 

从 图 12-6 中 可 以 看 出 ， 盒 子 模型 包含 如 下 4 个 部 分 。 

(1) content( 内 容 )。 内 容 是 盒子 模型 中 必需 的 一 部 分 ， 内 容 可 以 是 文字 、 图 片 等 元 素 。 

(2) padding( 空 白 )。 也 称 内 边 距 或 补 白 ， 用 来 设置 内 容 和 边框 之 间 的 距离 。 

(3) border( 边 框 )。 可 以 设置 内 容 边 框 线 的 粗细 、 颜 色 和 样式 等 ， 前 面 已 经 讲述 过 。 

(4) margin( 边 界 )。 即 外 边 距 ， 用 来 设置 内 容 与 内 容 之 间 的 距离 。 
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margin-top 


padding-top 


content 


padding-bottom 








margin-bottom 





12-6 ”盒子 模型 


一 个 盒子 的 实际 高 度 (宽度 ) 是 由 contenttpadding+bordertmargin 组 成 的 。 在 CSS 中 ， 可 以 
通过 设 定 width 和 height 来 控制 content 的 大 小 ， 并 且 对 于 任何 一 个 盒子 ， 都 可 以 分 别 设 定 4 
条 边 的 border、padding 和 margin。 


12.2.2 案例 2 一 一 定义 网 页 border 区 域 


border 边框 是 内 边 距 和 外 边 距 的 分 界线 ， 可 以 分 离 不 同 的 HTML 元 素 。border 有 3 个 属 
分 别 是 边框 样式 (style)、 颜 色 (coloD 和 宽度 (width)。 
【 例 12.1】 定 义 网 页 的 border 区 域 (案例 文件 为 ch12\12.1.htmD)。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>border 边框 </title> 
<style type="text/css"> 
-divi{ 
borde-widthr:10px; 
border-color:#ddccee; 
border-style:solid; 
width:410px; 
} 
ET 
border-width:1Px7 
border-color:#adccdd; 
border-style:dotted; 
width:410px; 
3 
.div3{ 
border-width:1px; 
border-color:#457873; 
border-style:dashed; 
width:410px; 
} 


性 


</style> 
</head> 
<body> 
<div class="divl"> 
这 是 一 个 宽度 为 10px 的 实 线 边 框 。 
</div> 
<br /><br /> 
<div class="div2"> 
这 是 一 个 宽度 为 1px 的 虚线 边框 。 
</div> 
<br /><br /> 
<div class="div3"> 
这 是 一 个 宽度 为 1px 的 点 状 边框 。 
</div> 
</body> 
</html> 


在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-7 所 示 。 可 以 看 到 ， 页 面 中 显示 了 3 个 不 同 风格 
的 盒子 ， 第 一 个 盒子 边框 线 宽度 为 10 像素 ， 边 框 样式 为 实 线 ， 颜 色 为 紫色 ;第 二 个 盒子 边框 
线 宽度 为 1 像素 ， 边 框 样式 是 虚线 ， 颜 色 为 浅 绿色 ;第 三 个 盒子 边框 宽度 为 1 像素 ， 边 框 样 
式 是 点 状 边框 ， 颜 色 为 绿色 。 
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区 是 一 个 宽度 为 10px 的 实 线 边 框 。 





这 是 一 个 宽度 为 1pz 的 虚线 边框 。 


这 是 一 个 宽度 为 pz 的 点 状 边 稚 ， 





图 12-7 设置 盒子 边框 
12.2.3 ”案例 3 一 一 定义 网 页 padding 区 域 


在 CSS 中 ， 可 以 设置 padding 属性 来 定义 内 容 与 边框 之 间 的 距离 ， 即 内 边 距 的 距离 。 语 
法 格式 如 下 : 

padding : length 

padding 属性 值 可 以 是 一 个 具体 的 长 度 ， 也 可 以 是 一 个 相对 于 上 级 元 素 的 百分比 ， 但 不 可 
以 使 用 负 值 。padding 属性 能 为 盒子 定义 上 、 下 、 左 、 右 间隙 的 宽度 ， 也 可 以 单独 定义 各 方位 
的 宽度 。 语 法 格式 如 下 : 


padding :padding-top | padding-right | padding-bottom | padding-left 


如 果 提 供 4 个 参数 值 ， 将 按 顺 时 针 的 顺序 作用 于 四 边 。 如 果 只 提供 1 个 参数 值 ， 将 用 于 
全 部 的 四 条 边 。 如 果 提 供 2 个 ， 第 1 个 作用 于 上 下 两 边 ， 第 2 个 作用 于 左右 两 边 。 如 果 提 供 3 
个 ， 第 1 个 用 于 上 边 ， 第 2 个 用 于 左 、 右 两 边 ， 第 3 个 用 于 下 边 。 

padding 属性 的 具体 含义 如 表 12-1 所 示 。 
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表 12-1 padding 属性 










设 定 上 间隙 
设 定 下 间隙 
设 定 左 间隙 
设 定 右 间隙 


Padding-top 
adding-bottom 
padding-left 

adding-right 



















【 例 12.2】 定 义 网 页 的 padding 区 域 (案例 文件 为 ch12\12.2.html)。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>padding</title> 
<style type="text/css"> 
.waif 
width:400px; 
height:250px; 
border:lpx #993399 solid; 
} 
img{ 
max-height:120px; 
padding-left:50px; 
padding-top:20px; 
} 
</style> 
</head> 
<body> 
<div class="wai"> 
<img src="07.jpg" /> 
<p> 这 张 图 片 的 左 内 边 距 是 50px， 顶 内 边 距 是 20px</p> 
</div> 
</body> 
</html> 


在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-8 所 示 。 可 以 看 到 ， 一 个 div 层 中 ， 显 示 了 一 个 图 
片 。 此 图 片 可 以 看 作 一 个 盒子 模型 ， 并 定义 了 图 片 的 左 内 边 距 和 上 内 边 距 的 效果 。 可 以 看 
出 ， 内 边 距 其 实 是 对 象 img 和 外 层 DIV 之 间 的 距离 。 
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这 张 图 片 的 左 内 边 距 是 50px， 顶 为 边 下 是 20px 














12-8 设置 内 边 距 





四 


12.2.4 ”案例 4 一 一 定义 网 页 margin 区 域 


margin 边界 用 来 设置 页 面 中 元 素 和 元 素 之 间 的 距离 ， 即 定义 元 素 周 围 的 空间 范围 ， 是 页 
排版 中 一 个 比较 重要 的 概念 。 语 法 格式 如 下 : 

margin : auto | length 

其 中 auto 表示 根据 内 容 自 动 调整 ，length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 
或 百分数 。margin 属性 包含 的 4 个 子 属性 控制 了 一 个 页 面 元 素 的 四 周 的 边 距 样式 ， 如 表 12-2 
所 示 。 
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表 12-2 margin 属性 
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如 果 和 希望 很 精确 地 控制 块 的 位 置 ， 需 要 对 margin 有 更 深入 的 了 解 。margin 设置 可 以 分 为 
行内 元 素 块 之 间 的 设置 、 非 行内 元 素 块 之 间 设置 和 父子 块 之 间 的 设置 。 


1. 行内 元 素 margin 属性 的 设置 
【 例 12.3】 行 内 元 素 margin 属性 的 设置 (案例 文件 为 ch12\12.3.htmD。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 行 内 元 素 设置 margin</title> 

<style type="text/css"> 

4 

spant{ 
background-color:#a2d2ff; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:lpx #ddeecc solid; 

于 

span.left{ 
margin-right:20px; 
background-color:#a9d6ff; 

. 

span.right{ 
margin-left:20px; 
background-color:#eeb0b07 

一 -> 

</style> 
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</head> 
<body> 
<span class="left"> 行 内 元 素 1</span><span class="right"> 行 内 元 素 2</span> 
</body> 
</html> 


在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-9 
所 示 。 可 以 看 到 一 个 蓝 色 盒子 和 红色 盒子， |(@) cnniinD 0 Banna 
二 者 之 间 的 距离 使 用 margin 设置 ， 其 距离 是 文件 (有 注 志 (E) ”查看 (V) ” 收 训 夫 (A) 工具 (T) 者 助 (H) 
左边 盒子 的 右边 距 margin-right 加 上 右边 盒子 。 | 于 于 三 天 
的 左边 距 margin-left。 

2， 非 行内 元 素 块 之 间 margin 属性 的 设置 

如 果 不 是 行内 元 素 ， 而 是 产生 换行 效果 
的 块 级 元 素 ， 情 况 就 可 以 发 生变 化 。 两 个 换 图 12-9 行内 元 素 margin 属性 的 设置 
行 块 级 元 素 之 间 的 距离 不 再 是 margin-bottom 
和 margin-top 的 和 ， 而 是 两 者 中 的 较 大 者 。 

【 例 12.4】 非 行内 元 素 块 之 间 margin 属性 的 设置 (案例 文件 为 chl12\12.4.htmD。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 块 级 元 素 的 margin</title> 
<style type="text/css"> 
过 是 一 三 
hli 
background-color:#ddeecc; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:1lpx #445566 solid; 
display:block; 














. 
-> 
</style> 
</head> 
<body> 
<hl style="margin-bottom:50px;"> 距 离 下 面 块 的 距离 </h1> 
<hl style="margin-top:30px;"> 距 离 上 面 块 的 距离 </h1> 
</body> 
</html> 


在 下 12.0 浏览 器 中 的 浏览 效果 如 图 12-10 所 示 。 可 以 看 到 两 个 hl 盒子 ， 二 者 上 下 之 间 
存在 距离 ， 其 距离 为 margin-bottom 和 margin-top 中 较 大 的 值 ， 即 50 像素 。 如 果 修 改 下 面 hl 
盒子 元 素 的 margin-top 为 40 像素 ， 会 发 现 执行 结果 没有 任何 变化 。 如 果 修 改 其 值 为 60 像 
素 ， 会 发 现下 面 的 盒子 会 向 下 移动 10 个 像素 。 
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12-10 ”设置 上 下 margin 距离 

3. 父子 块 之 间 margin 属性 的 设置 

当 一 个 div 块 包含 在 另 一 个 div 块 中 间 时 ， 二 者 便 会 形成 一 个 典型 的 父子 关系 。 其 中 子 块 

的 margin 设置 将 会 以 父 块 的 content 为 参考 。 
【 例 12.5】 父 子 块 之 间 margin 属性 的 设置 (案例 文件 为 chl12\12.5.htmD。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 包 含 块 的 margin</title> 

<style type="text/css"> 

<!-- 

Qivi 
background-color:#fffebb; 
padding:10px; 
border:lpx solid #000000; 

i: 

hli 
background-color:#a2d2ff; 
margin-top:0px; 
margin-bottom:30px; 
padding:15px; 
border:lpx dashed #004993; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 

一 -> 

</style> 

</head> 

<body> 

<div > 
<h1> 子 块 div</h1> 
</div> 

</body> 

</html> 


在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-11 所 示 。 可 以 看 到 子 块 hl 盒子 距离 父 div 下 边界 
为 40 像素 ( 子 块 30 像素 的 外 边 距 加 上 父 块 10 像素 的 内 边 距 )， 其 他 3 边 距 离 都 是 父 块 的 
padding 距离 ， 即 10 像素 。 
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在 上 例 中 ， 如 果 设 定 了 父 元 素 的 高 度 和 

height 值 ， 并 且 父 块 高 度 值 小 于 子 块 的 高 度 | 圈 下 EeewwmnaprelSassanman 

加 上 margin 的 值 ， 此 时 正 浏览 器 会 自动 扩 Oe 

大 ， 保 持 子 元 素 的 margin-bottom 的 空间 以 EP | 

及 父 元 素 的 padding-bottom。 而 Firefox 就 不 

会 这 样 ， 会 保证 父 元 素 的 height 高 度 的 完全 

吻合 ， 而 这 时 子 元 素 将 超过 父 元 素 的 范围 。 
当 将 margin 设置 为 负数 时 ， 会 使 得 被 设 _ 

为 负数 的 块 向 相反 的 方向 移动 ， 甚 至 覆盖 在 图 12-11 设置 包括 盒子 的 margin 距离 

另外 的 块 上 。 



































12.3 ”使 用 CSS 排版 


DIV 在 CSS+DIV 页 面 排版 中 是 一 个 块 的 概念 。DIV 的 起 始 标记 和 结束 标记 之 间 的 所 有 内 
容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 的 元 素 特性 由 DIV 标记 属性 来 控制 ， 或 者 是 通过 使 用 
样式 表格 式 化 这 个 块 来 进行 控制 。CSS+DIV 页 面 排版 思想 是 : 首先 在 整体 上 进行 <div> 标 记 
的 分 块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 后 在 各 个 块 中 添加 相应 的 内 容 。 


12.3.1 案例 5 一 一 将 页 面 用 DIV 分 块 


使 用 CSS+DIV 页 面 排版 布局 ， 需 要 对 网 页 有 一 个 整体 构思 ， 即 网 页 可 以 划分 为 几 个 部 
分 。 例 如 上 、 中 、 下 结构 ， 还 是 左右 两 列 结构 ， 还 是 三 列 结构 。 这 时 就 可 以 根据 网 页 构思 ， 
将 页 面 划分 为 几 个 DIV 块 ， 用 来 存放 不 同 的 内 容 。 当 然 了 ， 大 块 中 还 可 以 存放 不 同 的 小 块 。 
最 后 ， 通 过 CSS 属性 ， 对 这 些 DIV 进行 定位 。 

在 现在 的 网 页 设计 中 ， 一 般 情况 下 的 网 站 都 是 上 中 下 结构 ， 即 上 面 是 页 面 头 部 ， 中 间 是 
页 面 内 容 ， 最 下 面 是 页 脚 ， 整 个 上 中 下 结构 最 后 放 到 一 个 DIV 容器 中 ， 方 便 控 制 。 页 面 头 部 
一 般 用 来 存放 Logo 和 导航 菜单 ; 页 面 内 容 包含 页 面 要 展示 的 信息 、 链 接 和 广告 等 ;页 脚 存放 
的 是 版 权 信息 和 联系 方式 等 。 

将 上 中 下 结构 放置 到 一 个 DIV 容器 中 ， 方 便 后 面 排版 并 且 方 便 对 页 面 进行 整体 调整 ， 如 
图 12-12 所 示 。 





整体 页 面容 器 


页 头 








页 面 主体 














页 脚 











12-12 ”上 中 下 网 页 结构 


12.3.2 ”案例 6 一 一 设置 各 块 位 置 


复杂 的 网 页 布局 ， 不 是 单纯 的 一 种 结构 ， 而 是 包含 多 种 网 页 结构 。 例 如 ， 总 体 上 是 上 中 
下 ， 中 间 内 分 为 两 列 布局 等 ， 如 图 12-13 所 示 。 


整体 页 面容 器 








页 头 | 


页 面 主体 左 侧 页 面 主体 右 侧 


页 和 
12-13 ”复合 网 页 结构 


页 面 总 体 结构 确认 后 ， 一 般 情 况 下 ， 页 头 和 页 脚 变化 就 不 大 了 。 会 发 生变 化 的 ， 就 是 页 
面 主 体 。 此 时 需要 根据 页 面 展 示 的 内 容 ， 决 定 中 间 布 局 采用 什么 样式 ， 比 如 三 列 水 平分 布 、 
两 列 分 布 等 。 


12.3.3 ”案例 7 一 一 用 CSS 定位 


页 面 版 式 确定 后 ， 即 可 利用 CSS 对 DIV 进行 定位 ， 使 其 在 指定 位 置 出 现 ， 从 而 实现 对 页 
面 的 整体 规划 。 然 后 再 向 各 个 页 面 添加 内 容 。 
下 面 是 一 个 总 体 为 上 中 下 布局 ， 页 面 主体 布局 为 左右 布局 的 页 面 的 CSS 定位 案例 。 


1. 创建 HTML 页 面 ， 使 用 DIV 构建 层 
首先 构建 HTML 网 页 ， 使 用 DIV 划分 最 基本 的 布局 块 。 代 码 如 下 : 


<html> 
<head> 
<title>CSSs 排版 </title><body> 
<div id="container"> 
<div id="banner"> 页 面 头 部 </div> 
<div id=content > 
<div id="right"> 
页 面 主体 右 侧 
</div> 
<div id="left"> 
页 面 主体 左 侧 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
</body> 
</html> 
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在 上 述 代 码 中 ， 创 建 了 5 个 层 ， 其 中 ID 名 称 为 














container 的 DIV 层 ， 是 一 个 布局 容器 ， 即 所 有 的 页 = 其 
面 结构 和 内 容 都 是 在 这 个 容器 内 实现 的 。 名 称 为 SS TT 
banner 的 DIV 层 ， 是 页 头 部 分 。 名 称 为 footer 的 页 面部 
DIV 层 ， 是 页 脚 部 分 。 名 称 为 content 的 DIV 层 ， 是 3 
中 间 主 体 ， 该 层 包含 了 两 个 层 ， 一 个 是 right 层 ， 一 
个 是 left 层 ， 分 别 放置 不 同 的 内 容 。 

在 下 12.0 浏览 器 中 的 浏览 效果 如 图 12-14 所 图 12-14 使 用 DIV 构建 层 
示 。 可 以 看 到 ， 网 页 中 显示 了 这 几 个 层 ， 从 上 到 下 
依次 排列 。 


2. CSS 设置 网 页 整体 样式 


然后 需要 对 body 标记 和 container 层 ( 布 局 容器 ) 进 行 CSS 修饰 ， 从 而 对 整体 样式 进行 定 
义 。 代 码 如 下 : 


<style type="text/css"> 

es 

body { 
margin:0px; 
font-size:16px; 
font-family:" 幼 圆 "; 

} 

#container{ 
position:relative; 
width:100%; 

| 


--> 





</style> 

上 述 代码 只 是 设置 了 文字 大 小 、 字 型 、 布 局 容器 
container 的 宽度 、 层 定位 方式 ， 布 局 容器 撑 满 整个 济 | ei Oe 
览 器 。 文件 (六 名 (E) 喜 看 V) 收藏 天 (A) 工具 (T) 者 助 (H) 





页 面 主体 左 侧 
可 以 看 到 ， 此 时 相 比 较 上 一 个 显示 页 面 ， 发 生 的 变化 i 
不 大 ， 只 不 过 字 型 和 字体 大 小 发 生 了 变化 ， 因 为 
container 未 带 有 边框 和 背景 色 无 法 显示 该 层 。 


3. CSS 定义 页 头 部 分 
接 下 来 就 可 以 使 用 CSS 对 页 头 进行 定位 ， 即 banner 层 ， 使 其 在 网 页 上 显示 。 代 码 如 下 : 


#banner{ 
height:80px; 
border:lpx solid #000000; 
text-align:center; 
background-color:#a2d9ff; 
padding:10px; 


在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-15 所 示 。 训 





图 12-15 设置 网 页 整体 样式 


margin-bottom:2px; 


用 


上 述 代 码 首先 设置 了 banner 层 的 高 度 为 80 像 一 六 
素 ， 宽 度 充满 整个 container 布局 容器 ， 下 面 分 别 。 | 守 ) 合 国 ewsersedrnisva Pp- oj@cssmg | 


文 必 们 。 淹 名 (日 ”二 看 (V) 收 莫 夫 A) 工具 (T] 帮助 (H) 


设置 了 边框 样式 、 字 体 对 齐 方式 、 背 景色 、 内 边 
距 和 外 边 距 的 底部 等 。 

在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-16 所 
示 ， 可 以 看 到 ， 在 页 面 顶部 显示 了 一 个 浅 绿色 的 
边框 ， 边 框 充满 整个 浏览 器 ， 边 框 中 间 显 示 了 一 
个 【页 面 头 部 】 的 文本 信息 。 


4. CSS 定义 页 面 主 体 图 12-16 ”定义 网 页 头 部 


在 页 面 主体 中 如 果 两 个 层 并 列 显示 ， 需 要 使 用 float 属性 ， 将 一 个 层 设置 到 左边 ， 一 个 层 
设置 到 右边 。 代 码 如 下 : 


#right{ 
float:right; 
text-align:center; 
width:80%; 
border:lpx solid #ddeecc; 
margin-left:1px; 
height:200px; 
#1left{ 
float:left; 
width:19%; 
border:lpx solid #000000; 
text-align:center; 
height:200px; 
background-color:#bcbcbc; 
; 


上 述 代码 设置 了 这 两 个 层 的 宽度 ，right 
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层 占有 空间 的 80%，left 层 占有 空间 的 19%， | 局)BEaaeaaaaaaaralgsas 间 syoe 
并 分 别 设置 了 两 个 层 的 边框 样式 、 对 齐 方式 、 Es 
背景 色 等 。 
在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-17 有 
所 示 。 可 以 看 到 ， 页 面 主体 部 分 分 为 两 个 层 并 
列 显示 ， 左 侧 背景 色 为 灰色 ， 占 有 空间 较 小 ; 
右 侧 背 景色 为 白色 ， 占 有 空间 较 大 。 
5. CSS 定义 页 脚 是 
最 后 需要 设置 页 脚 部 分 ， 页 脚 通常 在 主体 
下 面 。 因 为 页 面 主体 中 使 用 了 float 属性 设置 图 12-17 ”定义 网 页 主体 


层 浮动 ， 所 以 需要 在 页 脚 层 设置 clear 属性 ， 
使 其 不 受 浮动 的 影响 。 代 码 如 下 : 
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#footer{ 
clear:both; /* 不 受 float 影响 */ 
text-align:center; 
height:30px; 
border:lpx solid #000000; 
background-color:#ddeecc; 


1 

上 述 代码 设置 页 脚 对 齐 方式 、 高 度 、 边 框 、 背 景色 等 。 在 正 12.0 浏览 器 中 的 浏览 效果 如 
图 12-18 所 示 。 可 以 看 到 ， 页 面 底部 显示 了 一 个 边框 ， 背 景色 为 浅 绿色 ， 边 框 充满 整个 DIV 
布局 容器 。 


| 国 Ceerswarineratoren 让- | 大 css 本 
六 [者 护 E) 齐 看 V】 可。 工具 m0 


页 西关 部 














页 面 主体 右 测 











图 12-18 ”定义 网 页 页 脚 


12.4 ”常见 网 页 布局 模式 


CSS 的 排版 是 一 种 全 新 的 排版 理念 ， 与 传统 的 表 
格 排版 布局 完全 不 同 ， 首 先 在 页 面 上 分 块 ， 然 后 应 用 
CSS 属性 重新 定位 。 在 本 节 中 ， 我 们 就 固定 宽度 布局 
进行 深入 讲解 ， 使 读者 能 够 熟练 掌握 这 些 方法 。 


12.4.1 案例 8 一 一 网 页 单列 布局 模式 


网 页 单列 布局 模式 是 最 简单 的 一 种 布局 形式 ， 也 
被 称 为 “网 页 1-1-1 型 布局 模式 ”。 图 12-19 所 示 为 网 
页 单列 布局 模式 示意 图 。 

制作 单列 布局 网 页 的 具体 操作 步骤 如 下 。 

EE 打开 记事 本 文件 ， 在 其 中 输入 代码 ， 访 

段 代 码 的 作用 是 在 页 面 中 放置 第 一 个 圆 角 矩 


形 框 。 具 体 代码 如 下 : 图 12-19 ”网 页 单列 布局 模式 
<!DOCTYPE html> 
<head> 


售 246 


<title> 单 列 网 页 布局 </title> 
</head> 

<body> 

<div class="rounded"> 
<h2> 页 头 </h2> 

<div class="main"> 

<p> 

铀 禾 日 当 午 ， 汗 滴 禾 下 土 <br/> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 

<div class="footer"> 
<p></p> 

</div> 

</div> 

</body> 

</html> 


上 述 代 码 中 这 组 <div>…</div> 之 间 的 内 容 是 固定 结构 的 ， 其 作用 就 是 实现 一 个 可 以 改变 
宽度 的 圆 角 框 。 在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-20 所 示 。 
EC 设置 圆 角 框 的 CSS 样式 。 为 了 实现 圆 角 框 效果 ， 加 入 如 下 样式 代码 : 


<style> 

body { 
background: #FFF; 
font: 14px 宋体 ; 
margin:07 
padding:0; 


沼 到 辑 讲 MQ+SS9 泗 关 一 一 半 下 站 避 哥 车 料 jz 兴国 





.rounded { 

background: url (images/left-top.gif) top left no-repeat; 
width:100%; 

1 

.rounded h2 { 

background: 

url (images/right-top.gif) 

top right no-repeat; 

padding:20px 20px 1l10px; 

margin:07 


} 

.rounded .main 1{ 
background: 

url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 

} 

.rounded .footer { 
background: 

url (images/left-bottom.gif) 
bottom left no-repeat; 
} 


.rounded .footer pi{ 
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color:red; 

text-align:right; 

background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 

padding:10px 20px 20px; 

margin:-20px 0 0 0; 

font:0/0; 

. 

</style> 


在 上 述 代 码 中 定义 了 整个 盒子 的 样式 ， 如 文字 大 小 等 ， 其 后 的 5 段 以 rounded 开头 的 


CSS 样式 都 是 为 实现 圆 角 框 进行 的 设置 。 这 段 CSS 代码 在 后 面 的 制作 中 ， 都 不 需要 调整 ， 直 
接 放 置 在 <style></style> 之 间 即 可 , 在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-21 所 示 。 








-~ oO Xx - 0O x 


| 
| 加 cvenpwwWaRS PC| 全 二 IIR 司 GwampwwARR9 -|| 司 昌 网 局 x| 
| 文件 (F) 妨 疆 (E) 各 者 V) ”收藏 天 Al 工兵 (T) 帮助 (H) 文件 (有 ) ”半岛 (E) ”大 看 (V】 效 芒 天 (A) 工具 (1) 帮助 (H) 


页 天 
ee 
有 


图 12-20 ”添加 网 页 圆 角 框 图 12-21 设置 圆 角 框 的 CSS 样式 


ECDIS 设置 网 页 固定 宽度 。 为 该 圆 角 框 单独 设置 一 个 id， 把 针对 它 的 CSS 样式 放 到 这 
个 id 的 样式 定义 部 分 。 设 置 margin 以 实现 在 页 面 中 居中 ， 并 用 width 属性 确定 固定 
宽度 ， 代 码 如 下 : 


#header { 
margin:0 auto; 
width:760px;} 














全 3 这 个 宽度 不 要 设置 在 Iounded 相关 的 CSS 样式 中 ， 因 为 该 样式 会 被 页 面 中 的 各 个 
Ee 部 分 公用 ， 如 果 设 置 了 固定 宽度 ， 其 他 部 分 就 不 能 正确 显示 了 。 


另外 ， 在 HTML 部 分 的 <div class="rounded">...</div> 的 外 面 套 一 个 div。 代 码 如 下 : 


<div id="header"> 

<div class="rounded"> 
<h2> 页 头 </h2> 

<div class="main"> 

<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 士 <br/> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 

<div class="footer"> 
<p></p> 

</div> 

</div> 

</div> 
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在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-22 所 示 。 





| 3) 于 cwampww MNBL hem 万 - C|| 民间 有 x 分 安 
文件 明知 (E) 二 看 (V) 收 这 夫 (A 工具 (帮助 (H) 














12-22 ”设置 网 页 固定 宽度 


EEC 设置 其 他 圆 角 和 矩形 框 。 将 放置 的 圆 角 框 再 复制 出 2 个 ， 并 分 别 设置 id 为 content 
和 footer， 分 别 代表 “内 容 ” 和 “页 脚 ”。 完 整 的 页 面 框架 代码 如 下 : 


<div id="header"> 

<div class="rounded"> 
<h2> 页 头 </h2> 

<div class="main"> 

<p> 

铀 禾 日 当 午 ， 汗 滴 禾 下 土 <br/> 
铀 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 

<div class="footer"> 
<p></p> 

</div> 

</div> 

</div> 

<div id="content"> 
<div class="rounded"> 
<h2> 正 文 </h2> 

<div class="main"> 

<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 土 <br /> 
铀 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 

<div class="footer"> 


a 
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<p> 

查看 详细 信息 &gt; &gt; 
</p> 

</div> 

</div> 

</div> 

<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 

<div class="main"> 


<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 

<div class="footer"> 
<p> 

</p> 

</div> 
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</div> 
</div> 
修改 CSS 样式 代码 如 下 : 


#header, #pagefooter,#content{ 
margin:0 auto; 
width:760px;} 


从 CSS 代码 中 可 以 看 到 ，3 个 div 的 宽度 都 设置 为 固定 值 760 像素 ， 并 且 通 过 设置 
margin 的 值 来 实现 居中 放置 ， 即 左右 margin 都 设置 为 auto。 在 正 12.0 浏览 器 中 的 浏览 效果 
如 图 12-23 所 示 。 


二 轩 cwampywww 香 下 布局 网 页 homl Pro Gennes 
wD WR BM WRN IRM tm 


与 Wm 


图 12-23 添加 其 他 网 页 圆 角 框 
12.4.2 ”案例 9 一 一 网 页 1-2-1 型 布局 模式 


网 页 1-2-1 型 布局 模式 是 网 页 制作 之 中 最 常用 的 一 种 模式 ， 模 式 结构 如 图 12-24 所 示 。 在 
布局 结构 中 ， 增 加 了 一 个 side 栏 。 但 是 在 通常 状况 下 ， 两 个 div 只 能 竖 直 排列 。 为 了 让 
content 和 side 能 够 水 平 排列 ， 必 须 把 它们 放 到 另 一 个 div 中 ， 然 后 使 用 浮动 或 者 绝对 定位 的 
方法 ， 使 content 和 side 并 列 起 来 。 
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图 12-24 网 页 1-2-1 型 布局 模式 


制作 网 页 1-2-1 型 布局 的 具体 操作 步骤 如 下 。 

EEC 修改 网 页 单列 布局 的 结果 代码 。 这 一 步 用 上 一 节 完 成 的 结果 作为 素材 ， 在 
HTML 中 把 content 部 分 复制 出 一 个 新 的 ， 这 个 新 的 id 设置 为 side。 然 后 在 它们 的 外 
面 套 一 个 div， 命 名 为 container， 修 改 部 分 的 框架 代码 如 下 : 


<div id="container"> 
<div id="content"> 
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<div class="rounded"> 
<h2> 正 文 1</h2> 

<div class="main"> 

<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 士 <br /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 

<div class="footer"> 


<p> 

查看 详细 信息 &gt; ggt; 
</p> 

</div> 

</div> 

</div> 

<div id="side"> 

<div class="rounded"> 
<h2> 正 文 2</h2> 

<div class="main"> 
<p> 

钢 禾 日 当 午 ， 汗 滴 儿 下士 <pr /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 

<div class="footer"> 
<p> 

查看 详细 信息 &gt 7?&gt; 
</p> 

</div> 

</div> 

</div> 

</div> 


修改 CSS 样式 代码 如 下 : 


#header, #pagefooter,#container{ 
margin:0 auto; 

width:760px;} 

#content{} 

#side{} 


从 上 述 代 码 中 可 以 看 出 #container 、#eader 、 趣 agefooter 并 列 使 用 相同 的 样式 ， 
#content、#side 的 样式 暂时 先 空 着 ， 这 时 的 效果 如 图 12-25 所 示 。 
EEDy 实现 正文 1 与 正文 2 的 并 列 排列 。 这 里 有 两 种 方法 来 实现 ， 首 先 使 用 绝对 定位 
法 来 实现 ， 具 体 的 代码 如 下 : 


#header, #pagefooter,#container{ 
margin:0 auto; 

width:760px;} 

#containerf{ 

position:relative; } 

#content{ 

position:absolute; 

top:0; 

left:0; 

width:500px; 
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a 

margin:0 0 0 S500px; 

在 上 述 代 码 中 ， 为 了 使 #content 能 够 使 用 绝对 定位 ， 必 须 考虑 用 哪个 元 素 作为 它 的 定位 基 
准 。 显 然 应 该 是 container 这 个 div。 因 此 ， 将 #container 的 position 属性 设置 为 relative， 使 它 
成 为 下 级 元 素 的 绝对 定位 基准 ， 然 后 将 #content 这 个 div 的 position 设置 为 absolute， 即 绝对 
定位 ， 这 样 它 就 脱离 了 标准 流 ，#fside 就 会 向 上 移动 占据 原来 #content 所 在 的 位 置 。 将 #content 
的 宽度 和 #side 的 左 margin 设置 为 相同 的 数值 ， 就 正好 可 以 保证 它们 并 列 紧 挨 着 放置 ， 且 不 会 
相互 重合 。 运 行 结果 如 图 12-26 所 示 。 








本 国 CwempwA1 21REn 和 (各 - 6] 局 TAR 有 x 国 Miae 

















图 12-25 ”修改 后 的 网 页 单列 布局 样式 
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图 12-26 ”使 用 绝对 定位 的 效果 
ES 实现 正文 1 与 正文 2 的 并 列 排列 ， 还 可 以 使 用 浮动 法 来 实现 。 在 CSS 样式 部 
分 ， 稍 作 修 改 ， 加 入 如 下 样式 代码 : 


#content{ 
float:left> 


width:500px7 
} 

#sidel{ 
float:left; 
width:260px; 


运行 结果 如 图 12-27 所 示 。 
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图 12-27 ”使 用 浮动 定位 的 效果 
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全 使 用 浮动 法 修改 正文 布局 模式 非常 灵活 。 例 如 ， 要 side 从 页 面 右边 移动 到 左边 ， 
汇 。 即 交换 与 content 的 位 置 ， 只 需要 稍微 修改 一 下 CSS 代码 ， 即 可 以 实现 ， 代 码 如 下 : 


#content{ 
float:right; 
width:500px; 

L 

#side{ float:left; 
width:260px; 

} 


经 


12.4.3 ”案例 10 一 一 网 页 1-3-1 型 布局 模式 
网 页 1-3-1 型 布局 模式 也 是 网 页 制作 之 中 最 常用 的 模式 之 一 ， 模 式 结构 如 图 12-28 所 示 。 





图 12-28 ”网 页 1-3-1 型 布局 模式 


这 里 使 用 浮动 方式 来 排列 横向 并 排 的 3 栏 ， 制 作 过 程 与 “1-1-1” 到 “1-2-1” 布 局 转换 一 
样 ， 只 要 控制 好 圾 eft、 拓 ontent、##side 这 3 栏 都 使 用 浮动 方式 ，3 列 的 宽度 之 和 正好 等 于 总 宽 
度 。 具 体 过 程 不 再 详 述 ， 制 作 完 之 后 的 代码 如 下 : 
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<!DOCTYPE html> 

<head> 

<title>1-3-1 固定 宽度 布局 </title> 
<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:0; 

padding:0; 

3 





.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 
.rounded h2 { 
background: 
url (images/right-top.gif) 
top right no-repeat; 
padding:20px 20px 1l0px; 
margin:07 


} 
.rounded .main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: 
url (images/left-bottom.gif) 
bottom left no-repeat; 
} 
.rounded .footer p { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:760px;} 
#1left{ 
float:left; 
width:200px; 


#content{ 
float:left; 
width:300px; 

#side{ 
float:left; 
width:260px; 


河 下 首 吕 哥 阁 料 山 z| 小 图 


#pagefooter{ 
clear:both; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 
<p> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 <br/> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
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<div id="container"> 
<div id=" left"> 
<div class="rounded"> 

<h2> 正 文 </h2> 
<div class="main"> 
<p> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 <br /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 
</p> 


</div> 
<div class="footer"> 
<p> 
查 看 详细 信 息 &gt; &gt; 
A 
</div> 
</div> 
</div> 
<div id="content"> 
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<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 
<p> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 <br /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 
</p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt 7?&gt; 
</p> 
</div> 
</div> 
</div> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 <br /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 
</p> 
</div> 
<div class="footer"> 
<p> 
查 看 详细 信息 &gt ?7&gt; 
</p> 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 





<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 
<p> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 
</p> 
</div> 
<div class="footer"> 
<p> 


</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 正 12.0 浏 览 器 中 的 浏览 效果 如 图 12-29 所 示 。 
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12-29 ”网 页 1-3-1 型 布局 模式 


12.5 ”综合 案例 一 一 创建 左右 布局 页 面 


一 个 美观 大 方 的 页 面 必然 是 一 个 布局 合理 的 页 面 。 左 右 布局 是 网 页 中 比较 常见 的 一 种 方 
式 ， 即 根据 信息 种 类 不 同 ， 将 信息 分 别 在 当前 页 面 左右 侧 显 示 。 本 案例 将 利用 前 面 学 习 的 知 
识 ， 创 建 一 个 左右 布局 的 页 面 。 

有 具体 操作 步骤 如 下 。 

分 析 需 求 。 

首先 需要 将 整个 页 面 分 为 左右 两 个 模块 ， 左 模块 放置 一 类 信息 ， 右 模块 放置 一 类 信息 。 
可 以 设 定 其 宽度 和 高 度 。 

创建 HTML 页面， 实现 基本 列表 。 

创建 HTML 页 面 ， 同 时 用 DIV 在 页 面 中 划分 左边 DIV 层 和 右边 DIV 层 两 个 区 域 ， 并 且 
将 信息 放 入 到 相应 的 DIV 层 中 ， 注 意 DIV 层 内 引用 CSS 样式 名 称 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 布 局 </title> 
</head> 
<body> 
<center> 
<div class="big"> 
<p class=pp> 女 人 </p> 
<div class="]left"> 
<h1> 女 人 </h1> 
<p> “。 男 人 性 福 告白 : 女人 的 性 感 与 年 龄 成 正比 09:59 </p> 
<p> 。 六 类 食物 能 有 效 对 抗 紫 外 线 11:15 </p> 
<p> 。 打 造 夏美 人 受 oL 追捧 的 清爽 发 型 10:05 </p> 
<p> “美丽 帮 帮 忙 : 别 让 大 油 脸 吓 跑 男人 09:47 </p> 
<p> “简约 雪 纺 清凉 衫 百 元 拱 出 欧美 范 儿 14:51 </p> 
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<p> 。 花 边 连衣裙 超 勾 人 7 月 穿 搭 出 新 意 11: 04 </p> 
</div> 
<div class="right"> 
<h1> 健 康 </h1> 
<p> 。 女 性 养生 : 让 女人 老 得 快 的 10 个 原因 19:18 </p> 
<p> 。 养 生 盘 点 : 喝 豆浆 的 九 大 好 处 和 七 大 禁忌 09:14</p> 
<p> 。 养 生 警惕 : 14 个 护肤 心理 “ 错 ” 觉 19:57</p> 
<p> 。 柿 子 番茄 骨 汤 8 种 营养 师 最 爱 的 食物 15:16</p> 
<p> 。 夏 季 养 生 指 南 : “夫妻 菜 ” 宣 常 吃 10:48 </p> 
<p> “10 条 食疗 养生 方法 ， 居 家 宅 人 的 养生 经 13:54 </p> 
</div> 
</div> 
</center> 
</body> 
</html> 


在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-30 所 示 。 可 以 看 到 ， 页 面 中 显示 了 两 个 模块 ， 
别 是 【女人 】 和 【健康 】， 二 者 上 下 排列 。 
ETTBY 添加 CSS 代码 ， 修 饰 整体 样式 和 DIV 层 。 代 码 如 下 : 











<style> 
和 
padding:0px; 
margin:0px; 
}body { 
font:" 宋 体 "; 
font-size:18px; 
} 
.big{ 
width:570px; 
height:210px; 
border:#C1C4CD lpx solid; 
} 
</style> 
在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-31 所 示 。 可 以 看 到 ， 页 面相 较 于 原来 字体 变 小 ， 
并 且 大 的 DIV 显示 了 边框 。 
- 0 x 
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和 和 有 六 对 和 外 线 1115 a 
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美丽 帮 邦 忙 ， 别 让 大 铀 脸 玫 中 男人 09.47 健 
简约 写 缠 清 浆 祖 百 元 撕 踢 区 于 区 JL14.51 和 
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12-30 上 下 排列 12-31 修饰 整体 样式 
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ED 添加 CSS 代码 ， 设 置 两 个 层 左右 并 列 显示 。 代 码 如 下 : 


=1eftt 
width:280px; 
float:right; // 设 置 右边 悬浮 
border:#C1C4CD lpx solid; 
j= rightt 
width:280px; 
float :left;// 设 置 左边 悬浮 
margin-left:6px; 
border:#C1C4CD lpx solid; 
} 


在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-32 所 示 。 可 以 看 到 ， 页 面 中 文本 信息 左右 并 列 显 
示 ， 但 字体 没有 发 生变 化 。 





汕 到 加 讲 NO+SS9 注 关 一 一 装 下 十 器 哥 诗 漳 吉 z 涛 固 





- OO x 
站 Clwamp\www\ 合 建 左 吕 ” CC | 慑 布局 x y @ 
文件 (有 ”编辑 (E) 章 看 (V) 站 巷 夫 (A) 工具 (T) 帮助 (H) 
去 人 
健康 女人 
女人 老 得 快 的 10 个 原因 19:18 人 性 福 告白 : 女人 的 性 感 与 年 龄 成 正比 09:59 
a 人 i 14 TN 
"夏季 养生 指南 :“ 夫 麦 菜 让 膏 吃 "简约 看 纺 青 京 衫 百 元 撕 出 太美 范 儿 1451 
"10 名 食疗 养生 方法 ， A “花边 庄家 裙 起 名 人 ?月 穿 指出 新意 11:04 














图 12-32 设置 左右 悬浮 
EEC 添加 CSS 代码 ， 定 义 文本 样式 。 代 码 如 下 : 


hli 

font-size:14px; 

padding-left:10px; 

background-color:#CcCcccc; 

height:20px; 

line-height:20px; 

}p{ 

margin:S5px; 

line-height:18px; 
Color:#2F17CD; 

}.pp{ 
width:570px; 
text-align:left; 
height:20px; 
background-color:D5E7FD; 
position:relative; 
left:=3px; 
tops=36x 
font-size:16px; 
text-decoration:underline; 
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在 正 12.0 浏览 器 中 的 浏览 效果 如 图 12-33 所 示 。 可 以 看 到 ， 页 面 中 文本 信息 左右 并 列 显 
示 ， 其 字体 颜色 为 蓝 色 ， 行 高 为 18 像素 。 





a x 
[ 半 Cwempwast p ~ 0 Sm 安 
文件 (F) 篇 岛 (E) 查看 V) ”收藏 夫 (A 工具 (D) 帮助 (H) 
女人 
健康 
安 性 养生 : 让 文人 老 得 快 的 10 个 原因 19:18 男人 性 福 告 白 : 女人 的 性 感 与 年 疮 成 正比 0939 
前 生 盘点 : 喝 瑟 沫 的 九 大 好 处 和 七 大 禁忌 09:14 六 类 食物 能 有 效 对 抗 索 外 线 11.15 
"只 生 警惕 :14 个 护肤 心 理 ' 错 帝 1957 打车 夏 美人 受 0L 者 捷 的 青 亦 发 型 1005 
"由 于 普 放 骨 汤 5 种 营养 师 最 要 9] 廊 初 17-16 人 洋 丁 帮 帮 全 : 别 让 大 油 及 下 男人 09:47 
夏季 养生 指南 : “夫妻 荣 " 宜 常 吃 1048 简约 委 纺 青 京 衫 百 元 指出 下 美 范 儿 14:31 
"10 条 食疗 养生 方法 ， 居 家 宅 人 的 养生 经 13-54 "花边 入 家 宰 超 名 人 ?月 容光 出 新 意 1104 











12-33 ”文本 修饰 样式 


12.6 疑难 解 惑 


疑问 1: 自动 缩放 网 页 布局 中 ， 网 页 框架 百分比 的 关系 是 什么 ? 


答 : 关于 框架 中 百分比 的 关系 ， 初 学 者 往往 比较 困惑 ， 比 如 ，container 等 外 层 div 的 宽度 
设置 为 85% 是 相对 于 浏览 器 窗口 而 言 的 比例 ， 而 后 面 content 和 side 这 两 个 内 层 div 的 比例 是 
相对 于 外 层 div 而 言 的 。 如 果 分 别 设置 为 66% 和 33%， 二 者 相 加 为 99%， 而 不 是 100%， 这 
是 为 了 避免 由 于 舍 入 误差 造成 总 宽度 大 于 它们 的 容器 的 宽度 ， 而 使 某 个 div 被 挤 到 下 一 行 
中 ， 如 果 和 希望 精确 ， 写 成 99% 也 可 以 。 


疑问 2: DIV 层 高 度 设置 好 ， 还 是 不 设置 好 ? 


答 : 在 正 浏览 器 中 ， 如 果 设 置 了 高 度 值 ， 但 是 内 容 很 多 ， 会 超出 所 设置 的 高 度 ， 这 时 浏 
览 器 就 会 自己 撑 开 高 度 ， 以 达到 显示 全 部 内 容 的 效果 ， 不 受 所 设置 的 高 度 值 限制 。 而 在 
Firefox 浏览 器 中 ， 如 果 固 定 了 高 度 的 值 ， 那 么 容器 的 高 度 就 会 被 固定 住 ， 就 算 内 容 过 多 ， 它 
也 不 会 撑 开 ， 也 会 显示 全 部 内 容 ， 但 是 如 果 容 器 下 面 还 有 内 容 的 话 ， 那 么 这 一 块 就 会 与 下 一 
块 内 容重 合 。 

这 个 问题 的 解决 办 法 就 是 : 不 要 设置 高 度 的 值 ， 这 样 浏览 器 就 会 根据 内 容 自动 判断 高 
度 ， 也 不 会 出 现 内 容重 合 的 问题 。 
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第 4 篇 


设计 网 页 元 素 


第 13 章 网 页 图 像 说 变 就 变 一 调整 与 修饰 图 像 

第 14 章 ”网 页 中 的 路 标 与 导航 一 一 制作 网 页 按钮 与 
导航 条 

第 15 章 ”网 页 中 迷人 的 蓝海 一 一 制作 网 页 特效 边线 
与 背景 

第 16 章 ”网 页 的 标志 与 旗帜 一 一 制作 网 页 Logo 与 
网 页 Banner 

第 17 章 ”让 网 页 活灵活现 一 一 制作 简单 网 页 动画 元 素 

第 18 章 ”网 页 元 素 的 动态 交互 一 一 创建 交互 式 动画 

第 19 章 ， 让 网 页 动 起 来 一 制作 动态 网 站 Logo 与 


Banner 





第 13 章 
网 页 图 像 说 变 就 变 


一 一 调整 与 修饰 
图 像 


网 页 中 存在 着 大 量 图 像 信息 ， 这 些 图 片 有 的 是 网 页 制作 者 拍摄 的 ， 有 的 是 从 网 
上 搜索 的 素材 图 像 。 但 是 ， 有 时 这 些 图 像 并 不 能 满足 网 站 的 需要 ， 这 就 需要 对 这 些 
图 像 进行 处 理 。 本 章 主 要 介绍 如 何 使 用 Photoshop 对 网 页 图 像 进行 调整 与 修饰 。 
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13.1 图 像 色调 的 调整 


图 像 色 调调 整 主要 是 对 图 像 进行 明暗 度 和 对 比 度 的 调整 。 例 如 ， 将 一 幅 暗 淡 的 图 像 调 整 
得 亮 一 些 ， 将 一 幅 灰 蒙蒙 的 图 像 调 整 得 清晰 一 些 。 


13.1.1 案例 1 一 一 调整 图 像 的 亮度 与 对 比 度 


使 用 【亮度 /对 比 度 】 命 令 ， 可 以 对 图 像 的 色调 范围 进行 简单 的 调整 。 但 是 在 操作 时 它 
会 对 图 像 中 的 所 有 像素 都 进行 同样 的 调整 ， 因 此 可 能 会 导致 部 分 细节 损失 。 有 具体 操作 步 又 
如 下 。 

EI 打开 “素材 \ch13\03.jpg” 文 件 ， 然 后 按 Ctrl+J 组 合 键 ， 复 制 背景 图 层 ， 如 图 13- 

1 所 示 。 

ET 选择 【图 像 】 一 【调整 】 一 【亮度 /对 比 度 】 命 令 ， 弹 出 【亮度 /对 比 度 】 对 话 框 ， 

在 【亮度 】 和 【对 比 度 】 文 本 框 中 分 别 输入 112 和 -23， 如 图 13-2 所 示 。 
EB 单 击 【确定 】 按 钮 ， 即 可 调整 图 像 的 亮度 和 对 比 度 ， 如 图 13-3 所 示 。 








和 Ea er 

对 比 度 : En | 

tw] 

门 使 用 旧版 () 区 预览 p) 
图 13-1 素材 文件 图 13-2 【亮度 /对 比 度 】 对 话 框 ” 图 13-3 ”调整 图 像 的 亮度 和 对 比 度 
后 直接 拖 动 【亮度 〗 和 【对 比 度 】〗 下 面 的 小 滑 块 ， 也 可 以 改变 相应 的 值 。 若 勾 选 


以 【使 用 旧版 〗 复 选 框 ， 在 调整 亮度 时 只 是 简单 地 增 大 或 减 小 所 有 像素 值 ， 可 能 会 导致 
修剪 或 丢失 高 光 或 阴影 区 域 中 的 图 像 细 节 。 


13.1.2 ”案例 2 一 一 使 用 【 色 阶 】 命 令 调整 图 像 

【 色 阶 】 命 令 通 过 调整 图 像 暗 调 、 灰 色调 和 高 光 的 亮度 级 别 来 校正 图 像 的 色调 以 及 平衡 
图 像 的 色彩 。 它 是 最 常用 的 色彩 调整 命令 之 一 。 

1. 认识 【 色 阶 】 对 话 框 


打开 “素材 \ch13\04.jpg” 文 件 ， 如 图 13-4 所 示 。 选 择 【 图 像 】 一 【调整 】 一 【 色 阶 】 命 


令 ， 或 者 按 CtrltL 组 合 键 ， 弹 出 【 色 阶 】 对 话 框 ， 通 过 该 对 话 框 ， 可 调整 图 像 的 色 阶 ， 如 
图 13-5 所 示 。 
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设置 白 场 


设置 灰 场 
设置 黑 场 











葡 栖 属 态 册 殿 光一 一 对 进 对 活 : 这 町 品 习 二 ci/ 时 国 





图 13-4 素材 文件 图 13-5 【 色 阶 】 对 话 框 


e@ 【 预 设 】: 在 其 下 拉 列 表 中 选择 一 个 预 设 文件 ， 可 自动 调整 图 像 。 若 选择 【 自 定 】 
选项 ， 自 定义 各 参数 后 ， 单 击 右 侧 的 医 ] 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【存储 巴 
设 】 选 项 ， 可 将 当前 的 参数 保存 为 一 个 预 设 文件 ， 以 便于 下 次 直接 调用 。 

@ 【通道 】: 设置 要 调整 色调 的 通道 。 选 择 某 个 通道 可 以 只 改变 特定 颜色 的 色调 ， 当 
图 像 设置 为 RGB 颜色 模式 时 ， 红 、 绿 和 蓝 3 个 通道 颜色 分 布 情况 分 别 如 图 13-6、 
图 13-7 和 图 13-8 所 示 。 


AG 
































| By x > 
| 御 放 (| 玉 位 让 本 a en eT ED): [要 议 值 DE pe 
| 证 是 Ce 本 1 | CD 
| 全 和 CD BA) Aah: EE 
| mn 本 [am 
AZ2 Pp Paid 
[ iF) 外 本 的 P) Ss do me) 
oo | [rm] [5 B [ro 5 [oo Bo ] 
ECL: 和 Ss 入 二 和 (0}: 
| 天 E 司 画 上 
13-6 【 红 】 通 道 的 颜色 13-7 【 绿 】 通 道 的 颜色 13-8 【 蓝 】 通 道 的 颜色 
分 布 情况 分 布 情况 分 布 情况 


e 【输入 色 阶 】: 该 区 域 有 3 个 参数 ， 在 文本 框 中 分 别 输入 暗 调 、 中 间 调 和 高 光 的 亮 
度 级 别 ， 或 者 直接 拖 动 滑 块 ， 即 可 修改 图 像 的 色调 范围 。 向 左 拖 动 滑 块 ， 可 使 图 
像 的 色调 变 亮 ， 如 图 13-9 和 图 13-10 所 示 ; 向 右 拖 动 滑 块 ， 则 图 像 的 色调 变 暗 ， 如 
13-11 和 图 13-12 所 示 。 
Sn 当 暗 调 滑 块 处 于 色 阶 0 时 ， 所 对 应 的 像素 是 纯 黑 的 。 若 向 右 拖 动 滑 块 ， 那 么 暗 调 
A 滑 块 所 在 位 置 左 侧 的 所 有 像素 都 会 变 成 黑色 ， 就 会 使 图 像 的 色调 变 暗 。 同 理 ， 当 高 光 
滑 块 处 于 色 阶 255 时 ， 所 对 应 的 像素 是 纯 白 的 。 若 向 左 拖 动 滑 块 ， 那 么 其 右 侧 的 所 有 
像素 都 会 变 成 白色 ， 就 会 使 图 像 的 色调 变 亮 


. 
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En 
视 凌 同 : [下 -0. ET3 
ee 本 LE 
租 入 EMOD: L_eaw |] 
.| 
pad 
I WP) 
fim] 73 | 
生出 和 防 (0): 
E En 
13-9 ”向 左 拖 动 滑 块 13-10 图像 的 色调 变 亮 
en x 
ME) [去 om CC we | 
Wi | 
杭 入 鱼 阶 (D; |_ Bama) | 
[| 造 式 .| 
pid 
2 = a 也 预 对 (p) 
[mm Lao 后 ] 
畏 出 色 阶 (O): 
ER 由 
a 
图 13-11 向 右 拖 动 滑 块 图 13-12 图 像 的 色调 变 暗 


e 【输出 色 阶 】: 该 区 域内 只 有 暗 调和 高 光 2 个 参数 ， 用 于 限制 图 像 的 亮度 范围 ， 降 
低 图 像 的 对 比 度 。 向 左 拖 动 滑 块 ， 那 么 图 像 中 最 亮 的 色调 不 再 是 白色 ， 则 会 降低 亮 
度 ， 如 图 13-13 和 图 13-14 所 示 ; 反之 ， 向 右 拖 动 滑 块 ， 则 提高 亮度 。 
































证 WE: [9 9 e. 
:ro = [Cm ] 
前 入 区 险 (D); Lem ] 
[车 区 TD。 
Pd 
也 预知 p] 
- - 
站 四 
畏 出 色 阶 (0): 
让 i 
0 [Ls] 
13-13 ”向 左 移动 滑 块 图 13-14 ”降低 亮度 


e 【取消 】: 单 击 该 按钮 ， 可 关闭 对 话 框 ， 并 取消 调整 色 阶 。 若 按 住 Alt 键 不 放 ， 此 
按钮 将 变 成 【复位 】 按 钮 ， 单 击 即 可 使 各 参数 恢复 为 原始 状态 。 

【自动 】: 单 击 该 按钮 ， 可 应 用 自动 颜色 校正 。 

【选项 】: 单 击 该 按钮 ， 将 弹出 【自动 颜色 校正 选项 】 对 话 框 ， 在 其 中 可 以 指定 使 
用 【自动 】 按 钮 对 图 像 进行 何 种 类 型 的 自动 校正 ， 如 自动 颜色 、 自 动 对 比 度 或 自动 
色调 校正 等 。 
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e。 吸管 工具 : 单 击 【 设 置 黑 场 】 按 钮 [加 ， 然 后 单 击 图 像 中 的 某 点 取样 ， 可 以 将 该 点 的 
像素 调整 为 黑色 ， 并 且 图 像 中 所 有 比 取 样 点 亮度 低 的 像素 都 会 调整 为 黑色 ， 如 图 13-15 
所 示 。 同 理 ， 若 单 击 【 设 置 灰 场 】 按 钮 |[ 品 ， 会 根据 取样 点 的 亮度 调整 其 他 中 间 色 调 
的 平均 亮度 ， 如 图 13-16 所 示 。 若 单 击 【 设 置 白 场 】 按 钮 [四 ， 会 将 所 有 比 取样 点 亮 
度 高 的 像素 调整 为 白色 ， 如 图 13-17 所 示 。 





图 13-15 设置 黑 场 图 13-16 设置 灰 场 图 13-17 设置 白 场 


2. 使 用 【 色 阶 】 命 令 


下 面 介 绍 如 何 使 用 【 色 阶 】 命 令 调整 图 像 的 色调 ， 其 中 最 重要 的 就 是 能 够 理解 直方 图 。 
(1) 山脉 集中 在 暗 调 一 端 。 出 现 该 种 情况 说 明 图 像 中 暗色 比较 多 ， 图 片 偏 暗 ， 如 图 13-18 
所 示 。 向 左 拖 动 高 光滑 块 ， 即 可 使 图 片 变 亮 ， 如 图 13-19 所 示 。 





图 13-18 ”图片 偏 暗 图 13-19 ”使 图 片 变 亮 


(2) 山脉 集中 在 中 间 。 出 现 该 种 情况 说 明 图 像 中 最 暗 的 点 不 是 黑色 ， 最 亮 的 点 也 不 是 白 
色 ， 缺 乏 对 比 度 ， 图 片 整 体 偏 永 ， 如 图 13-20 所 示 。 分 别 将 暗 调 滑 块 和 高 光滑 块 向 中 间 拖 
动 ， 即 可 增加 图 片 对 比 度 ， 如 图 13-21 所 示 。 








my 





13-20 ”图 片 整 体 偏 灰 13-21 ”增加 图 片 对 比 度 


a 


葡 郴 悚 该 册 肛 当 一 一 对 示 对 活 : 寄 本 喇 习 几 8 小 
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G) 山脉 集中 在 两 侧 。 与 第 2 种 情况 相反 ， 出 现 该 种 情况 说 明 图 像 反差 过 大 ， 如 图 13-22 
所 示 。 向 左 侧 拖 动 中 间 调 滑 块 ， 即 可 增加 图 像 的 亮色 部 分 ， 如 图 13-23 所 示 。 













13-22 图像 反 差 过 大 13-23 ”增加 图 像 的 亮色 部 分 


(4) 山脉 集中 在 高 光 调 一 端 。 与 第 1 种 情况 相反 ， 出 现 该 种 情况 说 明 图 像 偏 亮 ， 缺 少 
色 成 分 ， 如 图 13-24 所 示 。 向 右 侧 拖 动 暗 调 滑 块 ， 即 可 使 图 片 变 暗 ， 如 图 13-25 所 示 。 


eg 
ET 

[CE 
人 入 AYO): 


图 13-25 ”使 图 片 变 暗 


图 13-24 图 像 偏 亮 、 缺 少 黑色 成 分 


Sn 并 不 是 直方 图 中 波峰 居中 且 山 脉 均匀 的 图 像 才 是 最 合适 的 ， 判 断 一 张 图 像 的 曝光 
六 、 是 否 准 确 ， 关 键 在 于 图 像 是 否 准确 地 表达 出 了 拍摄 者 的 意图 。 


13.1.3 ”案例 3 一 一 使 用 【曲线 】 命 令 调整 图 像 


【曲线 】 命 令 与 【 色 阶 】 命 令 的 功能 相同 ， 也 是 用 于 调整 图 像 的 色调 范围 及 色彩 平衡 。 
但 它 不 是 通过 控制 3 个 变量 (阴影 、 中 间 调 和 高 光 ) 来 调节 图 像 的 色调 ， 而 是 对 0 到 255 色调 范 
围 内 的 任意 点 进行 精确 调节 ， 最 多 可 同时 使 用 16 个 变量 。 

1. 认识 【曲线 】〗 对 话 框 

打开 “素材 \ch13\05.jpg” 文 件 ， 如 图 13-26 所 示 。 选 择 【 图 像 】 一 【调整 】 一 【曲线 】 


命令 ,或 者 按 CtrltM 组 合 键 ， 即 弹出 【曲线 】 对 话 框 ， 如 图 13-27 所 示 。 
【编辑 点 以 修改 曲线 】 台 :该 项 为 默认 选项 ， 表 示 在 曲线 上 单 击 即 可 添加 新 的 控制 





bb 
点 ， 拖 动 控制 点 可 修改 曲线 的 形状 ， 如 图 13-28 所 示 。 
。 【通过 绘制 来 修改 曲线 】[ 幢 : 单 击 该 按钮 ， 可 以 直接 手绘 自由 曲线 ， 如 图 13-29 所 


示 。 绘 制 完成 后 ， 单 击 的 按钮 ， 可 显示 出 控制 点 ， 单 击 【 平 滑 】 按 钮 ， 可 使 手绘 的 
曲线 更 加 平滑 。 
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加 
Noe ne ee 

me Gaal 

编辑 点 以 修改 曲线 一 “> 本“ 3 二 


有 大 
通过 绘制 来 修改 曲线 ED 
EE 
加 百 方 图 IN) 
Ti 
TR 












调整 工具 
V xm 


77 7 TRAN) 





图 13-26 素材 文件 图 13-27 【曲线 】 对 话 框 


欧 栖 登 该 册 殿 光一 一 对 进 对 活 : 殉 西 罚 习 由 cr 由 国 




















Je ores | Ce 
开演 
4 mnie 巴 wam 
by TA) 
区 
E33 a dd a | 如 2 eee 
图 13-28 ” 拖 动 控制 点 可 修改 曲线 的 形状 图 13-29 手绘 自由 曲线 


e。 【输入 】/【 输 出 】: 分 别 显示 了 调整 前 和 调整 后 的 像素 值 。 

。 调整 工具 的: 单 击 该 按钮 ， 将 光标 定位 在 图 像 中 ， 光 标 会 变 为 吸管 形状 网， 同时 曲 
线 上 会 出 现 一 个 空心 圆 ， 如 图 13-30 所 示 。 按 住 左 键 并 拖 动 鼠标 ， 即 可 调整 色调 ， 
此 时 空心 圆 变 为 实心 圆 ， 如 图 13-31 所 示 。 











13-30 ” 单 击 调整 工具 按钮 的 效果 13-31 拖 动 鼠标 可 调整 色调 

e 【显示 数量 】: 显示 强度 值 和 百分比 ， 默 认 以 【 光 】 显 示 ，【 颜 料 /油墨 】 选 项 与 其 
相反 。 

e 【网 格 大 小 】: 显示 网 格 的 数量 ， 该 项 对 曲线 功能 没有 影响 ， 但 较 多 的 网 格 可 以 便 
于 更 精确 的 操作 。 


® 【通道 全 加】: 选择 该 项 可 以 登 加 各 个 颜色 通道 的 曲线 ， 当 分 别 调整 了 各 个 颜色 通 
道 时 ， 才 能 显示 出 效果 ， 如 图 13-32 所 示 。 
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【直方 图 】: 选择 该 项 可 以 显示 出 直方 图 ， 如 图 13-33 所 示 为 没有 选择 该 项 的 效果 。 





全 
e@ 【基线 】: 选择 该 项 可 以 显示 出 对 角 线 ， 如 图 13-34 所 示 为 没有 选择 该 项 的 效果 。 
e 【交叉 线 】: 选择 该 项 ， 在 调整 曲线 时 可 显示 出 水 平 线 和 垂直 线 ， 便 于 精确 调整 。 
| J 
由 x 本 FA 网 ee 
困 蕊 a 村田 
图 13-32 ”通道 全 加 的 效果 图 13-33 不 显示 出 直方 图 图 13-34 不 显示 出 对 角 线 


【 曲线】 对话 框 中 其 他 参数 的 含义 与 【 色 阶 】 对 话 框 相 同 ， 这 里 不 再 歼 述 。 


2. 使 用 【曲线 】 命 令 

在 【曲线 】 对 话 框 中 ， 输 入 和 输出 色 阶 分 别 表示 调整 前 和 调整 后 的 像素 值 。 打 开 一 幅 图 像 ， 
在 曲线 上 单 击 创建 一 个 控制 点 ， 此 时 输入 和 输出 色 阶 的 像素 值 默认 是 相同 的 ， 如 图 13-35 所 示 。 

(1) 当 向 上 调整 曲线 上 的 控制 点 时 ， 此 时 输入 色 阶 不 变 ， 但 输出 色 阶 变 大 ， 色 阶 越 大 ， 


色调 越 浅 ( 色 阶 0 表示 黑色 ， 色 阶 255 表示 白色 )， 此 时 图 像 会 变 亮 ， 如 图 13-36 所 示 。 





13-36 ”输出 色 阶 变 大 则 图 像 变 亮 


图 13-35 原 图 
(2) 当 向 左 调整 控制 点 时 ， 输 出 色 阶 不 变 ， 但 输入 色 阶 变 小 ， 因 此 图 像 也 会 变 亮 ， 如 


13-37 所 示 。 
(3) 反之 ， 当 向 下 或 向 右 调整 控制 点 时 ， 图 像 就 会 变 暗 ， 如 图 13-38 所 示 。 





13-38 图像 变 暗 


13-37 ”输入 色 阶 变 小 则 图 像 变 亮 
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(4) 若 将 曲线 调整 为 S 形 ， 可 以 使 高 光 区 域 图 像 变 亮 ， 阴 影 区 域 图 像 变 暗 ， 增 加 图 像 的 
对 比 度 ， 如 图 13-39 所 示 。 
(5) 反之 ， 若 将 曲线 调整 为 反 S 形 ， 则 会 降低 图 像 的 对 比 度 ， 如 图 13-40 所 示 。 


四 a 
了 Pi 









13-39 ”将 曲线 调整 为 S 形 增加 对 比 度 13-40 ”将 曲线 调整 为 反 S 形 降 低 对 比 度 


(6) 若 将 左下 角 的 控制 点 移动 到 左上 角 ， 而 将 右上 角 的 控制 点 移动 到 右 下 角 ， 可 以 使 图 
像 反 相 ， 如 图 13-41 所 示 。 
(7) 若 将 顶部 和 底部 的 控制 点 移动 到 中 间 ， 可 以 创建 色调 分 离 的 效果 ， 如 图 13-42 所 示 。 


WY 
Ns 


2 | 


. » 
讽 困 个 该 册 嵌 下 一 对 部 对 注 罕 困 司 习 二 2 小 





图 13-41 使 图 像 反 相 图 13-42 创建 色调 分 离 的 效果 


13.1.4 ”案例 4 一 一 调整 图 像 的 曝光 度 


【曝光 度 】 命 令 用 于 调整 曝光 不 足 或 曝光 过 度 的 照片 ， 它 会 对 图 像 整体 进行 加 亮 或 调 
暗 。 另 外 ， 用 户 也 可 以 使 用 【 色 阶 】 和 【曲线 】 命 令 调 节 曝 光度 。 


1. 认识 【曝光 度 】〗 对 话 框 


选择 【图 像 】 一 【调整 】 一 【曝光 度 】 命 令 ， 即 弹出 【曝光 度 】 对 话 框 ， 如 图 13-43 所 示 。 
e 【曝光 度 】: 设置 图 像 的 曝光 程度 。 上 曝光 度 越 
大 ， 图 像 越 明 亮 ， 对 极限 阴影 的 影响 很 小 。 i a 
。 【位 移 】: 设置 图 像 的 曝光 范围 。 该 项 可 以 使 。 | we 3 
阴影 和 中 间 调 变 暗 ， 对 高 光 区 域 的 影响 很 小 。 ”| 一 二 ”7 国 
向 左 拖 动 滑 块 ， 可 以 增加 对 比 度 。 . | 可 
。 【 灰 度 系数 校正 】: 使 用 简单 的 乘 方 函数 调整 图 。 | 二 开导 9 le] 
像 灰 度 系数 ， 负 值 会 被 视 为 它们 的 相应 正 值 。 
【曝光 度 】 对 话 框 中 其 他 参数 的 含义 与 【 色 阶 】 对 国信 人 9 [村 克 对 汪 作 
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话 框 相同 ， 这 里 不 再 更 述 。 
2. 使 用 【曝光 度 】〗 命 令 


下 面 使 用 【曝光 度 】 命 令 调整 图 像 的 曝光 度 。 有 具体 操作 步骤 如 下 。 

EEC 打开 “素材 'ch13\06.jpg” 文 件 ， 如 图 13-44 所 示 。 

E52Y 选择 【图 像 】 一 【调整 】 一 【曝光 度 】 命 令 ， 在 弹出 的 【曝光 度 】 对 话 框 中 设 
置 参数 ， 如 图 13-45 所 示 。 

EEY 单 击 【 确 定 】 按 钮 ， 调 整 后 的 效果 如 图 13-46 所 示 。 
































地 光度 X 
预 设 (R); [ 自 定 让 汪 - 确定 
取消 ] 
旭光 度 (E): 413 | 
”xx 国 
位 移 o): ID 
灰 度 系数 校正 (G); [aa | 
图 13-44 ”素材 文件 图 13-45 设置 参数 图 13-46 调整 后 的 效果 


13.2 图像 色彩 的 调整 


图 像 色彩 调整 是 指 调整 图 像 中 的 颜色 。Photoshop 提供 了 多 种 调整 色彩 的 命令 ， 通 过 这 些 
命令 可 以 轻松 地 改变 图 像 的 颜色 。 


13.2.1 案例 5 一 一 使 用 【色相 /饱和 度 】 命 令 


【色相 /饱和 度 】 命 令 用 于 调节 整个 图 像 或 图 像 中 单个 颜色 成 分 的 色相 、 饱 和 度 和 亮度 。 
“色相 ”就 是 通常 所 说 的 颜色 ， 即 红 、 橙 、 黄 、 绿 、 青 、 蓝 和 紫 ， “饱和 度 ” 简 单 地 说 是 一 
种 颜色 的 纯度 ， 饱 和 度 越 大 ， 纯 度 越 高 ; “亮度 ”是 指 图 像 的 明暗 度 。 

打开 “素材 \ch13\07.jpg” 文 件 ， 如 图 13-47 所 示 。 选 择 【 图 像 】 一 【调整 】 一 【色相 / 饱 
和 度 】 命 令 ， 或 者 按 Ctrl+U 组 合 键 ， 即 弹出 【色相 /饱和 度 】 对 话 框 ， 如 图 13-48 所 示 。 


























色 根 / 筷 和 诬 x 
入 iE) [中 V 值 一 _ 引号 确定 
rr [取消 
色相 (0H): [" 
他 和 
明度 加: 
二 口 兰 色 o) 
党 EE MP) 
EY 
图 13-47 素材 文件 13-48 【色相 /饱和 度 】 对 话 框 
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图 13-49 图 像 转换 为 红色 图 13-50 图像 转换 为 其 他 颜色 图 13-51 调整 【色相 】 参 数 可 








“ 预 设 ” 下 方 的 下 拉 列 表 框 : 设置 调整 颜色 的 范围 ， 包 括 【 全 图 】、【 红 色 】、 
【黄色 】 等 7 个 选项 。 

调整 工具 [加 ， 单 击 该 按钮 ， 可 以 在 文档 窗口 中 拖 动 鼠 标 来 调整 饱和 度 ， 若 按 住 Ctrl 
键 ， 拖 动 鼠 标 可 调整 色相 。 

【着 色 】: 选择 该 项 可 将 图 像 转换 为 单 色 图 像 。 若 当前 的 前 景色 是 黑色 或 白色 ， 图 
像 会 转换 为 红色 ， 如 图 13-49 所 示 ; 若是 其 他 的 颜色 ， 则 会 转换 为 该 颜色 的 色相 ， 


旭 汪 由 亚 欧 古 喇 习 册 引 时 国 





En 


去 2 RS | 





ax 


的 色相 修改 颜色 


底部 的 颜色 条 : 对 话 框 底部 有 2 个 颜色 条 ， 分 别 表 示 调 整 前 和 调整 后 的 颜色 。 若 将 
编辑 设置 为 【全 图 】 选 项 ， 调 整 【 色 相 】 人 参数， 此 时 图 像 的 颜色 改变 ， 在 底部 第 二 
个 颜色 条 中 可 查看 调整 后 的 颜色 ， 如 图 13-52 所 示 ， 进 而 得 出 如 图 13-53 所 示 的 图 像 
显示 效果 。 若 将 编辑 设置 为 某 个 颜色 选项 ， 如 这 里 选择 【红色 】， 此 时 颜色 条 中 间 
会 有 几 个 小 滑 块 ， 表 示 对 特定 的 颜色 设置 色 阶 调 节 的 范围 ， 这 样 只 会 影响 到 属于 
该 颜色 范围 的 像素 ， 如 图 13-54 所 示 。 调 整 滑 块 的 位 置 ， 可 修改 图 像 中 的 红色 ， 如 
13-55 所 示 。 进 而 得 出 如 图 13-56 所 示 的 图 像 显示 效 果 。 

















图 13-52 在 第 二 个 颜色 条 中 查看 图 13-53 ”对 应 的 图 像 效果 图 13-54 ”对 特定 的 颜色 设 


调整 后 的 颜色 置 范围 


Lue 3 

















口 so 
ss = 国 4 2 忆 iRm 
”一 一 
13-55 ”调整 滑 块 的 位 置 13-56 ”调整 滑 块 后 的 图 像 效 果 
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me 将 编辑 设置 为 某 个 颜色 选项 后 ， 单 击 [到 按钮 ， 然 后 在 图 像 中 单 击 ， 可 选择 该 颜 
SS 色 作 为 调整 的 范围 ， 单 击 [ 园 按 钮 ， 可 扩展 颜色 范围 ， 单 击 [ 园 按 钮 ， 可 缩小 颜色 范围 。 








13.2.2 ”案例 6 一 一 使 用 【自然 饱和 度 】 命 令 


【自然 饱和 度 】 命 令 中 的 “饱和 度 ” 与 【色相 /饱和 度 】 命 令 中 的 “饱和 度 ” 的 效果 是 相 
同 的。 但 不 同 的 是 ， 使 用 【色相 /饱和 度 】 命 令 时 ， 若 将 饱和 度 调 整 到 较 高 的 数值 ， 图 像 会 产 
生 色 彩 过 分 饱和 ， 造 成 图 像 失真 ， 而 使 用 【自然 饱和 度 】 命 令 可 以 对 已 经 饱和 的 像素 进行 保 
护 ， 只 调整 图 像 中 饱和 度 低 的 部 分 ， 从 而 使 图 像 更 加 自然 。 具 体操 作 步 骤 如 下 。 

四 TD 打开 “素材 ch13\08.jpg” 文 件 ， 如 图 13-57 所 示 。 

EC 选择 【图 像 】 一 【调整 】 一 【自然 饱和 度 】 命 令 ， 弹 出 【自然 饱和 度 】 对 话 

框 ， 将 【自然 饱和 度 】 参 数 设 置 为 100， 如 图 13-58 所 示 。 

EC) 单 击 【确定 】 按 钮 ， 调 整 后 的 效果 如 图 13-59 所 示 。 


SR 若 保持 【自然 饱和 度 】 参 数值 不 变 ， 将 【他 和 度 】 参 数 设置 为 100， 效 果 如 图 13-60 
SS 。 所 示 ， 此 时 颜色 过 于 鲜 拖 ， 图 像 有 些 失真 


自然 多 和 这 x 
自然 饮 和 度 (V): ll] [ 牵 _] 
— 人 
地 和 度 (5); o A) 
; > 
-== ZE 2 2 























图 13-57 素材 文件 图 13-58 【自然 饱和 度 】 图 13-59 调整 后 的 图 13-60 设置 【饱和 
对 话 框 效果 度 】 参 数 的 效果 


13.2.3 ”案例 7 一 一 使 用 【色彩 平衡 】 命 令 
【色彩 平衡 】 命 令 用 于 调整 图 像 中 的 颜色 分 























布 ， 从 而 使 图 像 整 体 的 色彩 平衡 。 若 照片 中 存在 色 。 “| ezrs x 
彩 失衡 或 偏 色 现象 ， 可 以 使 用 该 命令 。 ee 
BO: [9 jio Jlo | pp 
1. 认识 【色彩 平衡 〗】 对 话 杠 | 
ET 二 二 
选择 【图 像 】 一 【调整 】 一 【色彩 平衡 ] 命 。 | 全 一 
令 ， 或 者 按 CtrltB 组 合 键 ， 即 弹出 【色彩 平衡 】 ee oy er 
对 话 框 ， 如 图 13-61 所 示 。 
e 【色彩 平衡 】: 在 【 色 阶 】 文 本 框 中 输入 届 杯 5， GE 避 二 下 二 匡 区 


色 阶 值 ， 或 者 拖 动 3 个 滑 块 ， 即 可 设置 色 


彩 平衡 。 若 要 减少 某 个 颜色 ， 就 增加 这 种 颜色 的 补 色 ( 左 右 两 个 颜色 分 别 为 互补 色 )。 
例如 ， 将 最 上 面 的 滑 块 拖 向 【青色 】， 即 可 在 图 像 中 增加 青色 ， 而 减少 其 补 色 一 一 
红色 。 对 于 其 他 颜色 ， 也 是 同样 的 原理 。 

@ 【阴影 】/【 中 间 调 】/【 高 光 】: 选择 不 同 的 选项 ， 即 可 设置 该 区 域 的 颜色 平衡 。 

@ 【保持 明度 】: 选择 该 项 可 防止 图 像 的 亮度 随 颜色 的 更 改 而 改变 。 

2. 使 用 【色彩 平衡 】 命 令 

下 面 使 用 【色彩 平衡 】 命 令 为 图 像 调整 色彩 。 有 具体 操作 步骤 如 下 。 

TP 打开 “素材 \ch13\09.jpg” 文 件 ， 如 图 13-62 所 示 。 

了 TY 选择 【图 像 】 一 【调整 】 一 【色彩 平衡 】 命 令 ， 弹 出 【色彩 平衡 】 对 话 框 ， 选 
中 【中 间 调 】 单 选 按钮 ， 然 后 将 滑 块 分 别 拖 向 红色 和 黄色 ， 在 图 像 中 增加 这 两 种 颜 


色 ， 如 图 13-63 所 示 。 
EC 选中 【高 光 】 单 选 按钮 ， 同 样 将 滑 块 分 别 拖 向 红色 和 黄色 ， 如 图 13-64 所 示 。 


欧 林 发 凉 册 殿 光一 一 对 进 对 活 : 殉 了 西 品 习 二 ci/ 时 看 








和 
3 














Bm [ra [oJ [5 8 s+29 |[o 2 

| 颈 ] 到 8 2 be 2 
TO 和 
8 人 
色调 入 hi 
亲朋 是 s) 。 M0) 口 高 浇 罗 口 间 对 5) 。 中国 沽 (D) 。 加 高 XCN) 
本 代 持 明 诺 (v) 本 保 析 加 要 (V) 

图 13-62 素材 文件 图 13-63 设置 【中 间 调 】 的 颜色 。 图 13-64 设置 【高 光 】 的 颜色 


EC 单 击 【确定 】 按 钮 ， 制 作出 黄昏 夕阳 西 下 的 效果 ， 如 图 13-65 所 示 。 


若 将 滑 块 分 别 拖 向 青色 和 蓝 色 ， 可 制作 出 不 一 样 的 效果 ， 如 图 13-66 所 示 。 


\ 
13-65 ”制作 出 黄昏 夕阳 西 下 的 效果 13-66 制作 出 不 一 样 的 效果 


13.2.4 ”案例 8 一 一 使 用 【黑白 】 命 令 


【黑白 】 命 令 并 不 是 单纯 地 将 图 像 转换 为 黑白 图 片 ， 它 还 可 以 控制 每 种 颜色 的 灰色 调 ， 
并 为 灰色 着 色 ， 使 图 像 转换 为 单 色 图 片 。 
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打开 “素材 \ch13\10.jpg” 文 件 ， 如 图 13-67 所 示 。 选 择 【 图 像 】 一 【调整 】 一 【黑白 】 
命令 ， 即 弹出 【黑白 】 对 话 框 ， 此 时 图 像 自 动 转换 为 黑白 图 片 ， 如 图 13-68 和 图 13-69 所 示 。 
































We: [Bu 二 
TN: ml ]w 人 
画 B:- leo J ean 

Bm 

得 可 3 [ol 
We mc 
EAS): LEm 
PLM): 本 CC 
em 
区 
乱 和 度 ( 习 加 be 

13-67 原 图 13-68 【黑白 】 对 话 框 13-69 ”将 图 像 转换 为 黑白 图 片 


e ”颜色 : 拖 动 某 种 颜色 的 滑 块 ， 可 以 调整 该 颜色 的 灰 度 。 例 如 ， 将 黄色 滑 块 向 左 拖 
动 ， 图 像 中 由 黄色 转换 而 来 的 灰色 调 将 变 暗 ， 如 图 13-70 所 示 。 反 之 ， 若 向 右 拖 动 
黄色 滑 块 ， 则 图 像 会 变 亮 ， 如 图 13-71 所 示 。 


| 若 直 接 在 图 像 中 单 击 并 拖 动 鼠标 ， 可 以 使 单 击 点 的 颜色 所 转换 而 来 的 灰色 调 变 暗 
或 交 充 . 


@ 【色调 】: 选择 该 项 可 使 黑白 图 片 变 为 单 色调 效果 。 拖 动 色 相 和 饱和 度 滑 块 ， 可 更 
改 单 色调 的 颜色 和 饱和 度 ， 如 图 13-72 所 示 。 


ee ‘ 3 
ay 





图 13-70 图 像 中 的 灰色 调 变 暗 图 13-71 图 像 变 亮 图 13-72 ”使 黑白 图 片 变 为 单 色调 效果 


13.2.5 “案例 9 一 一 使 用 【照片 滤 镜 】 命 令 


【照片 滤 镜 】 命 令 可 以 模拟 在 相机 镜头 前 面 安装 彩色 滤 镜 的 效果 ， 从 而 调整 图 像 的 色彩 
平衡 和 色温 ， 使 图 像 呈 现 出 更 准确 的 曝光 效果 。 具 体操 作 步 又 如 下 。 
EEJDp 打开 “素材 'chl13\11.jpg” 文 件 ， 该 图 片 偏 蓝 ， 如 图 13-73 所 示 。 
ED 选择 【图 像 】 一 【调整 】 一 【照片 滤 镜 】 命 令 ， 弹 出 【照片 滤 镜 】 对 话 框 ， 将 
【 滤 镜 】 设 置 为 【加 温 滤 镜 】 选 项 ， 并 调整 【浓度 】 参 数 ， 如 图 13-74 所 示 。 
ES 单 击 【 确 定 】 按 钮 ， 即 可 降低 色温 ， 使 图 片 恢复 正常 状态 ， 如 图 13-75 所 示 。 
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one 图 
RE 
六 保 慷 明 至 (L) 
图 13-73 素材 文件 图 13-74 【了 照片 滤 镜 】 对 话 框 。 图 13-75 降低 色温 后 的 图 片 效果 
5 【 滤 镜 】 用 于 设置 所 要 使 用 的 滤 镜 类 型 。 若 选择 【颜色 了 选项 ， 可 自 定义 一 种 照 
SS 片 的 滤 镜 颜色 ; 【浓度 】 用 于 设置 应 用 于 图 像 的 颜色 数量 ， 该 值 越 高 ， 应 用 的 颜色 调 


整 越 大 。 


| 如 果 图 像 色 彩 偏 红 ， 可 以 提升 色温 ; 若 图 像 偏 蓝 ， 则 需要 降低 色温 。 当 转换 色温 


了 提示 
鲜 时 ， 亮 度 可 能 会 有 所 损失 ， 因 此 还 可 以 调整 亮度 和 对 比 度 ， 使 图 片 效 果 更 佳 。 


13.2.6 ”案例 10 一 一 使 用 【通道 混合 器 】 命 令 


【通道 混合 器 】 命 令 可 以 改变 某 一 通道 中 的 颜色 ， 并 混合 到 主 通 道中 产生 一 种 图 像 合成 
效果 。 














通道 爱 合 请 x 

1. 认识 【通道 混合 器 】 对 话 框 [Bua 0 菲 3 
输出 通 吉 :| 红 肘 消 |] 

打开 一 幅 图 像 ， 选 择 【 图 像 】 一 【调整 】 一 【通道 混合 | se i | 


器 】 命 令 ， 即 弹出 【通道 混合 器 】 对 话 框 ， 如 图 13-76 所 示 。 a 
。 【输出 通道 】: 设置 要 调整 的 颜色 通道 , 可 随 颜色 一 








模式 而 异 。 到 ] 

。 【 源 通 道 】: 在 3 个 颜色 通道 中 输入 比例 值 , 或 者 “| 诗 
拖 动 滑 块 ， 可 以 设置 该 通道 颜色 在 输出 通道 颜色 中 。 | aa 下 * 
所 占 百分比 。 a 





e@ 【总 计 】: 显示 3 个 源 通 道 的 百分比 总 值 。 当 该 值 
大 于 100% 时 ， 会 显示 一 个 会 图标 ， 表明 图 像 的 阴 
影 和 高 光 细节 会 有 所 损失 。 

e 【常数 】;: 设置 输出 通道 的 不 透明 度 ( 取 值 范围 为 -200~~+200)。 正 值 表示 在 通道 中 增 
加 白色 ， 负 值 表示 在 通道 中 增加 黑色 。 

e@ 【 单 色 】: 选择 该 项 可 使 彩色 图 像 转换 为 灰 度 图 像 ， 此 时 所 有 色彩 通道 使 用 相同 的 
设置 。 

2. 使 用 【通道 混合 器 】 命 令 


下 面 使 用 【通道 混合 器 】 命 令 调 整 糖果 的 颜色 。 有 具体 操作 步骤 如 下 。 
EEIDs 打开 “素材 ch13\12.jpg” 文 件 ， 如 图 13-77 所 示 。 


13-76 【通道 混合 器 】 对 话 框 


加 
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ECJRP9 选择 【图 像 】 一 【调整 】 一 【通道 混合 器 】 命 令 ， 弹 出 【通道 混合 器 】 对 话 
框 ， 将 【输出 通道 】 设 置 为 【 红 】， 在 【 源 通 道 】 区 域 中 设置 【红色 】 为 0，【 绿 
色 】 为 135，【 蓝 色 】 为 0， 如 图 13-78 所 示 。 此 时 将 减 去 红色 信息 ， 从 而 使 红色 变 
为 黑色 ， 增 加 绿色 信息 ， 而 绿色 与 红色 相 加 可 以 得 到 黄色 ， 如 图 13-79 所 示 。 


Pr 
Pr oe. 
生出 示意 红 旧 EE 





wa) Lg 
图 13-77 素材 文件 图 13-78 将 【输出 通道 】 设置 图 13-79 图像 效 果 
为 【 红 】 并 设置 参数 


EEC) 接着 将 【输出 通道 】 设 置 为 【 绿 】， 在 【 源 通道 】 区 域 中 设置 【红色 】 为 33， 
【绿色 】 为 100，【 蓝 色 】 为 0， 如 图 13-80 所 示 。 

EEC 然后 将 【输出 通道 】 设 置 为 【 蓝 】， 在 【 源 通道 】 区 域 中 设置 【红色 】 为 50， 
【绿色 】 为 0，【 蓝 色 】 为 0， 如 图 13-81 所 示 。 


区 于 BY 在 【 红 】 通 道中 减 去 红色 信息 ， 然 后 在 【 绿 】 和 【 蓝 】 通 道中 增加 了 红色 信 
息 ， 最 终 效果 如 图 13-82 所 示 。 
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13-80 将 【输出 通道 】 设 置 13-81 将 【输出 通道 】 设 置 
为 【 绿 】 为 【 蓝 】 


13-82 ”图 像 的 最 终 效果 


13.2.7 案例 11 一 一 使 用 【匹配 颜色 】 命 令 


【匹配 颜色 】 命 令 用 于 匹配 不 同 图 像 之 间 、 多 个 图 层 之 间或 者 多 个 选区 之 间 的 颜色 ， 即 
将 源 图 像 的 颜色 匹配 到 目标 图 像 中 ， 使 目标 图 像 虽 然 保 持原 来 的 画面 ， 却 有 与 源 图 像 相 似 的 
色调 。 

打开 “素材 \chl3\gitl- 目 标 文件 jpg” 和 “素材 \ch13\13.jpg” 文 件 ， 如 图 13-83 所 示 。 选 择 
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【图 像 】 一 【调整 】 一 【匹配 颜色 】 命 令 ， 即 弹出 【匹配 颜色 】 对 话 框 ， 如 图 13-84 所 示 。 


岂 庆 对 注 桨 厅 喇 习性 El 洲 











图 13-83 原 图 图 13-84 【匹配 颜色 】 对 话 框 


葡 困 发 态 册 代 醒 


了 提示 当前 选中 的 图 像 即 为 目标 图 像 。 


e@ 【应 用 调整 时 忽略 选区 】: 当 在 目标 图 像 中 创建 了 选区 时 ， 选 择 该 项 会 忽略 选区 ， 
而 调整 整个 图 像 ， 若 不 选择 将 会 只 影响 选区 中 的 图 像 。 如 图 13-85 和 图 13-86 所 示 分 
别 是 选择 该 项 和 不 选择 该 项 的 效果 。 


Ee 













图 13-85 ”调整 整个 图 像 图 13-86 ”只 调整 选区 中 的 图 像 


e 【明亮 度 】: 设置 目标 图 像 的 亮度 。 

e 【颜色 强度 】: 设置 目标 图 像 的 色彩 饱和 度 。 

@ 【 渐 隐 】: 设置 作用 于 目标 图 像 的 力度 。 该 值 越 大 ， 力 度 反而 越 弱 。 如 图 13-87 所 
示 是 将 该 值 分 别 设置 为 10 和 50 的 效果 。 

e@ 【中 和 】: 选择 该 项 可 消除 偏 色 。 图 13-88 和 图 13-89 所 示 分 别 是 不 选择 该 项 和 选择 
该 项 的 效果 。 

@ 【使 用 源 选区 计算 颜色 】: 当 在 源 图 像 中 创建 了 选区 时 ， 选 择 该 项 将 只 使 用 选区 中 
的 图 像 来 匹配 目标 图 像 。 

e 【 源 】: 设置 要 进行 匹配 的 源 图 像 。 

e 【图 层 】: 若 源 图 像 中 包含 多 个 图 层 ， 可 设置 要 进行 匹配 的 特定 图 层 。 若 要 匹配 源 
图 像 中 所 有 图 层 的 颜色 ， 选 择 【 合 并 的 】 选 项 即 可 。 














. 
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< :二 得 
13-87 ”将 渐 隐 值 分 别 设置 为 10 和 50 的 效果 





图 13-88 不 选择 【中 和 】 选 项 的 效果 13-89 ”选择 【中 和 】 选 项 的 效果 


13.2.8 ”案例 12 一 一 使 用 【替换 颜色 】 命 令 


【 蔡 换 颜 色 】 命 令 允 许 先 选 择 图 像 中 的 某 种 颜色 ， 然 后 改变 该 颜色 的 色相 、 饱 和 度 和 亮 
度 值 。 它 相当 于 执行 【选择 】 一 【色彩 范围 】 命 令 再 加 上 【色相 /饱和 度 】 命 令 。 


1. 认识 【替换 颜色 】 对 话 框 


打开 “素材 \ch13\14.jpg” 文 件 ， 如 图 13-90 所 示 。 选 择 【 图 像 】 一 【调整 】 一 【替换 颜 
色 】 命 令 ， 即 弹出 【 蔡 换 颜色 】 对 话 框 ， 如 图 13-91 所 示 。 

e@ ”吸管 工具 : 单 击 轩 按 钮 ， 在 预览 框 或 图 像 中 单 击 ， 可 设置 取样 颜色 ， 单 击 [四 按钮 ， 
可 添加 取样 颜色 ， 单 击 [2 按钮 ， 将 减 去 取样 颜色 。 注 意 ， 预 览 框 中 的 白色 部 分 即 为 
选中 的 颜色 。 

e@ 【本 地 化 颜色 簇 】: 选择 该 项 可 设置 在 图 像 中 选择 相似 且 连 续 的 颜色 ， 从 而 构建 更 
加 精确 的 选择 范围 。 

@ 【颜色 容 差 】: 设置 颜色 的 选择 范围 。 容 差 越 大 ， 颜 色 的 选择 范围 就 越 广 。 如 图 13-92 
和 图 13-93 所 示 分 别 是 将 颜色 容 差 设置 为 10 和 50 时 的 效果 。 

@ 【色相 】/【 饱 和 度 】/【 明 度 】: 选择 颜色 范围 后 ， 通 过 这 3 项 可 设置 所 选 颜色 的 色 
相 、 饱 和 度 、 明 度 。 
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| 全 EO 本 全 M) 
-| 
bo ) ee Ee 调 
与 
图 13-90 原 图 图 13-91 【替换 颜色 】 对 话 杠 从 
国 424 
国 4 Z He: 品 本 地 化 大 色 饶 [) 有 
[J 本 地 化 新 色 铂 2) 
一 项 色 容 状 ():， 一 一 [5 |] 
图 13-92 ”将 颜色 容 差 设 置 为 10 的 效果 图 13-93 ”将 颜色 容 差 设置 为 50 的 效果 


2. 使 用 【替换 颜色 】 命 令 


下 面 使 用 【 蔡 换 颜 色 】 命 令 为 衣服 更 换 颜色 。 有 具体 操作 步骤 如 下 。 

IP 打开 “素材 \ch13\15.jpg” 文 件 ， 如 图 13-94 所 示 。 

ET 选择 【图 像 】~~【 调 整 】~~【 蔡 换 颜色 】 命 令 ， 弹 出 【替换 颜色 】 对 话 框 ， 单 

击 [ 团 按 钮 ， 将 【颜色 容 差 】 设 置 为 77， 然 后 在 衣服 上 连续 单 击 ， 对 颜色 进行 取样 。 
选择 颜色 范围 后 ， 设 置 【色相 】、【 饱 和 度 】 等 参数 ， 如 图 13-95 所 示 。 

EB 单 击 【确定 】 按 钮 ， 即 可 更 换 衣 服 的 颜色 ， 如 图 13-96 所 示 。 


Eee x 
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13.2.9 案例 13 一 一 使 用 【可 选 颜色 】 命 令 


【可 选 颜色 】 命 令 用 于 调整 单个 颜色 分 量 的 印刷 色 数 量 。 通 俗 来 讲 ， 可 选 颜色 就 是 一 个 
局 部 调 色 工具 。 例 如 ， 当 需要 调整 一 张 图 像 中 的 红色 部 分 时 ， 使 用 该 命令 ， 可 以 选择 红色 ， 
然后 调节 红色 中 包含 的 4 种 基本 印刷 色 (CMYK) 的 含量 ， 从 而 调整 图 像 中 的 红色 ， 而 不 会 影响 
到 其 他 颜色 。 








1. 认识 【可 选 颜色 】 对 话 框 EE ae 
EE): 9 ME 

打开 一 幅 图 像 ， 选 择 【 图 像 】 一 【调整 】 一 【可 选 颜色 】 oe mm] 
命令 ， 即 弹出 【可 选 颜色 】 对 话 框 ， 如 图 13-97 所 示 。 el: El 











Co 
e 【颜色 】: 选择 一 种 主 色 ， 即 可 调整 该 颜色 中 青色 、 #0 ] 
洋红 、 黄 色 和 黑色 的 比例 。Photoshop 共 提 供 了 9 个 RE: 5 
主 色 供 选择 ， 分 别 是 RGB 三 原色 ( 红 、 绿 、 蓝 )、 ELE): 5 
CMY 三 原色 ( 黄 、 青 、 洋 红 ) 和 黑白 灰 明 度 ( 白 、 黑 、 
灰 )， 如 图 13-98 所 示 。 其 中 ， 白 色 用 于 调节 高 光 ， 


中 性 灰 和 黑色 分 别 用 于 调节 中 间 调 和 暗 调 。 13-97 【可 选 颜色 】 对 话 框 


za 读者 应 了 解 基本 的 油墨 原色 的 配色 原理 ， 才 能 准确 地 使 用 【可 选 颜色 】 命 令 进行 
调 色 。 例 如 ， 红 色 可 以 分 离 出 黄色 和 洋红 色 ， 黄 色 加 青色 油墨 可 以 得 到 绿色 。 若 要 增 
加 某 种 颜色 ， 可 以 减少 其 补 色 的 数量 等 。 通 过 色 轮 我 们 可 以 清楚 地 了 解 这 些 关 系 ， 如 
图 13-99 所 示 。 


nie le 























方法 :四 相对 [风口 次 对 





绿 


图 13-98 9 个 主 色 13-99 色 轮 


@ 【相对 】: 选择 该 项 可 按照 总 量 的 百分比 修改 油墨 的 含量 。 例 如 ， 如 果 从 50% 洋 红 
的 像素 开始 添加 10%， 则 5% 将 添加 到 洋红 ， 结 果 为 55% 的 洋红 (50%x10% = 5%)。 

@ 【绝对 】: 选择 该 项 可 直接 按照 输入 的 值 来 修改 含量 。 例 如 ， 如 果 从 50% 洋 红 的 像 
素 开始 ， 然 后 添加 10%， 洋 红 油 墨 就 会 设置 为 60%。 


2. 使 用 【可 选 颜色 】 命 令 


下 面 使 用 【可 选 颜色 】 命 令 使 草原 由 黄色 转换 为 绿色 。 具 体操 作 步 骤 如 下 。 
EECDp 打开 “素材 ch13\16.jpg” 文 件 ， 如 图 13-100 所 示 。 
EY 选择 【图 像 】 一 【调整 】 一 【可 选 颜 色 】 命 令 ， 弹 出 【可 选 颜色 】 对 话 框 ， 将 


【颜色 】 设 置 为 【黄色 】， 将 【青色 】 设 置 为 100%， 如 图 13-101 所 示 。 
EECDey 在 黄色 油墨 基础 上 增加 青色 油墨 的 含量 ， 此 时 大 树 和 草原 将 变 为 绿色 ， 而 天 空 
的 颜色 没有 改变 ， 如 图 13-102 所 示 。 
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13-100 ”素材 文件 13-101 将 【颜色 】 设 置 为 【黄色 】 13-102 ”调整 后 的 效果 


了 YY 将 【颜色 】 设 置 为 【 蓝 色 】， 将 【青色 】 和 【洋红 】 设 置 为 100%， 将 【黄色 】 
设置 为 -100%， 如 图 13-103 所 示 。 


通过 色 轮 可 以 知道 ， 青 色 加 洋红 油墨 可 以 得 到 蓝 色 。 另 外 ， 降 低 黄色 油墨 的 含 
量 ， 可 以 增加 其 补 色 蓝 色 的 含量 。 因 此 ， 天 空 将 增加 蓝 色 油墨 的 含量 。 


EEJD) 此 时 天 空 将 变 为 蓝 色 天 空 ， 如 图 13-104 所 示 。 
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图 13-103 将 【颜色 】 设 置 为 【 蓝 色 】 13-104 ”天 空 将 变 为 蓝 色 天 空 


13.2.10 ”案例 14 一 一 使 用 【阴影 /高 光 】 命 令 


【阴影 /高 光 】 命 令 能 基于 阴影 或 高 光 中 的 局 部 相 邻 像素 来 校正 每 个 像素 ， 从 而 调整 图 像 
的 阴影 和 高 光 区 域 。 它 适用 于 校正 由 强 道光 而 形成 剪影 的 照片 ， 或 者 由 于 太 接 近 相机 闪光 灯 
而 有 些 发 白 的 焦点 。 有 具体 操作 步骤 如 下 。 

ET 打开 “素材 \ch13\17.jpg” 文 件 ， 如 图 13-105 所 示 。 

EEC 选 择 【 图 像 】 一 【调整 】 一 【阴影 /高 光 】 命 令 ， 弹 出 【阴影 /高 光 】 对 话 框 ， 此 

时 Photoshop 会 默认 提高 阴影 的 亮度 ， 也 可 以 手动 设置 阴影 的 【数量 】 为 61%， 如 

图 13-106 所 示 。 
EEJSp 单 击 【 确 定 】 按 钮 ， 此 时 阴影 区 域 将 会 变 亮 ， 而 高 光 区 域 不 受 影响 ， 如 图 13-107 

所 示 。 
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Ex [CRAO- ] 
aa ol | [ms).. ] 
口 旺 示 更 匈 壬 项 (0) RP) 
图 13-105 素材 文件 图 13-106 【阴影 高 光 】 对 话 框 图 13-107 设置 后 的 效果 
了 8 局 光 x 
半 影 FE 
数 星 (A): So |% 
Sin 在 【阴影 /高 光 】 对 话 框 中 选中 【 显 mm: 5 6 二 | 证 沁 二 
SN 示 更 多 选项 】 复 选 框 ， 还 可 以 调整 阴 RT Case 
影 、 高 光 区 域 的 色调 、 半 径 等 参数 ， 如 数 抽 UW: 5 一 一 一 0]% 
图 13-108 所 示 。 其 中 ，【〖【 色 调 】〗 参 数 可 ER 和 
年生 0 一 [30 |] 他 表 
设置 修改 范围 ， 较 小 的 值 只 会 对 较 暗 的 i 
范围 进行 调整 ，【 半 径 】 参 数 可 设置 每 ee EEC 
WwW 和 rs 
个 像素 周围 的 局 部 相 邻 像素 的 大 小 ， 而 we 和 
相 邻 像素 决定 了 像素 是 属于 阴影 还 是 高 ee ee 
光 区 域 . 条 








图 13-108 选中 【显示 更 多 选项 】 复 选 杠 
可 进行 更 多 参数 设置 


13.3 ”修复 图 像 中 的 污点 与 瑕 症 


修复 和 修补 工具 组 主要 用 于 修复 图 像 中 的 污点 或 瑕 症 ， 该 工 
具 组 共 包 含 5 个 工具 ， 分 别 是 污点 修复 画笔 工具 、 修 复 画 笔 工 
具 、 修 补 工 具 、 内 容 感 知 移动 工具 和 红眼 工具 ， 如 图 13-109 所 示 。 


13.3.1 案例 15 一 修复 图 像 中 的 污点 ww 


使 用 污点 修复 面 笔 工具 国 可 以 快速 移 去 照片 中 的 污点 、 划 痕 和 其 他 不 理想 的 部 分 。 下 面 
使 用 污点 修复 画笔 工具 去 除 人 物 脸 上 的 斑点 。 有 具体 操作 步骤 如 下 。 
TI 打开 “素材 \ch13\01.jpg” 文 件 ， 如 图 13-110 所 示 。 
ED 选择 污点 修复 面 笔 工具 国 ， 在 选项 栏 中 设置 各 项 参数 保持 不 变 (画笔 大 小 可 根据 
需要 进行 调整 )， 然 后 将 光标 移动 到 人 物 脸 上 的 斑点 上 并 单 击 ， 该 工具 会 自动 在 图 像 
中 进行 取样 ， 结 合 周围 像素 的 特点 对 斑点 进行 修复 ， 如 图 13-111 所 示 。 
EEJe) 在 其 他 的 斑点 区 域 单 击 ， 或 者 直接 拖 动 鼠标 ， 即 可 修复 这 些 斑点 ， 如 图 13-112 





























CA 


图 13-110 素材 文件 图 13-111 在 斑点 上 单 击 图 13-112 修复 斑点 


Dr 在 修复 时 可 使 用 缩放 工具 国 放 大 图 像 ， 以 便 精 确定 位 要 修复 的 斑点 
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13.3.2 ”案例 16 一 一 修复 图 像 中 的 瑕 冶 


修复 画笔 工具 国 可 用 于 校正 瑕 疯 ， 它 与 污点 修复 面 笔 工 具 的 工作 方式 类 似 。 但 不 同 的 
是 ， 修 复 画 笔 工具 要 求 指定 样本 点 ， 而 后 者 可 自动 从 所 修饰 区 域 的 周围 取样 。 


Sn 修饰 大 片区 域 或 需要 更 大 程度 地 控制 来 源 取样 时 ， 用 户 可 使 用 修复 画笔 而 不 是 污 
SN 点 修复 画笔 。 


下 面 使 用 修复 画笔 工具 去 除 衣服 上 的 污点 。 具 体操 作 步 又 如 下 。 

ESJDp 打开 “素材 \ch13\18.jpg” 文 件 ， 如 图 13-113 所 示 。 

TIY 选择 修复 面 笔 工具 国 ， 在 选项 栏 中 设置 【 源 】 为 【取样 】， 并 取消 选中 【对 
齐 】 复 选 框 ， 然 后 按 住 Alt 键 并 单 击 ， 如 图 13-114 所 示 。 

EBY 取样 后 ， 在 衣服 的 污点 处 单 击 ， 即 可 将 取样 点 复制 到 污点 处 ， 从 而 去 除 衣服 上 
的 污点 ， 如 图 13-115 所 示 。 








2 





上 


图 13-113 素材 文件 图 13-114 单 击 鼠 标 在 图 像 上 取样 ”图 13-115 将 取样 点 复制 到 污点 处 


Sn 对 于 复杂 的 图 片 ， 也 可 多 次 改变 取样 点 进行 修复 。 


Sn 无 论 是 使 用 何 种 工具 修复 图 像 ， 都 可 以 结合 选区 完成 ， 以 避免 在 涂抹 目标 区 域 时 
改变 目标 周围 的 像素 。 
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13.3.3 ”案例 17 一 一 修复 图 像 选中 的 区 域 


使 用 修补 工具 国 ， 可 以 用 其 他 区 域 或 图 案 中 的 像素 来 修复 选中 的 区 域 。 像 修复 画笔 工具 
一 样 ， 修 补 工具 能 将 样本 像素 的 纹理 、 光 照 、 阴 影 等 与 源 像素 进行 匹配 ， 不 同 的 是 ， 它 是 通 
过 选区 对 图 像 进行 修复 的 。 下 面 使 用 修补 工具 除去 多 余 的 人 物 图 像 。 具 体操 作 步 骤 如 下 。 

EECJDp 打开 “素材 ch13\19.jpg” 文 件 ， 如 图 13-116 所 示 。 

EEC 在 【图 层 】 面 板 中 选择 背景 图 层 ， 按 Ctrl+J 组 合 键 复制 图 层 ， 如 图 13-117 所 示 。 


在 操作 前 ， 用 户 应 养 成 复制 图 层 的 习惯 ， 以 免 在 操作 时 破坏 原 图 ， 造 成 不 必要 的 
损失 。 


EBD) 选择 修补 工具 国 ， 在 选项 栏 中 设置 【修补 】 为 【 源 】， 然 后 在 图 像 上 拖 动 鼠 标 
创建 一 个 选区 ， 如 图 13-118 所 示 。 


提 
提示 
DS 





Dr 用 户 也 可 以 使 用 选 框 工具 、 快 速 选择 工具 或 套 索 工具 等 创建 选区 ， 然 后 再 使 用 修 
外 。 补 工具 修复 图 像 。 





图 13-116 素材 文件 图 13-117 复制 图 层 图 13-118 ”创建 一 个 选区 


EEC 将 光标 定位 在 选区 内 ， 单 击 并 向 右 侧 拖 动 鼠标 ， 如 图 13-119 所 示 。 

EECDy 释放 鼠标 后 ， 即 可 使 用 右 侧 的 图 像 来 修复 选区 ， 如 图 13-120 所 示 。 

EEJe 按 Ctrl+D 组 合 键 ， 取 消 选 区 的 选择 ， 然 后 重复 步骤 3 至 步骤 5， 将 其 他 多 余 的 
人 物 图 像 去 除 ， 如 图 13-121 所 示 。 





图 13-119 单 击 并 向 右 侧 图 13-120 ”使 用 右 侧 的 图 像 图 13-121 将 其 他 多 余 的 人 物 
拖 动 鼠标 来 修复 选区 图 像 去 除 


13.3.4 ”案例 18 一 一 内 容 感 知 移动 工具 
使 用 内 容 感知 移动 工具 国 ， 可 以 将 选中 的 对 象 移动 或 扩展 到 图 像 的 其 他 区 域 中 ， 使 图 像 


S 286 





mm 
第 国 
重新 组 合 ， 留 下 的 空洞 将 自动 使 用 图 像 中 的 匹配 元 素 填充 。 下 面 使 用 内 容 感知 移动 工具 移动 避 虽 
小 狗 的 位 置 。 具 体操 作 步 又 如 下 。 章 
TIP 打开 “素材 'ch13\20.jpg” 文 件 ， 在 【图 层 】 面 板 中 按 Ctl+J 组 合 键 复制 图 层 ， 于 
如 图 13-122 所 示 。 图 

EC) 选择 内 容 感知 移动 工具 ， 在 工具 选项 栏 中 设置 【模式 】 为 【移动 】， 并 选中 便 
【投影 时 变换 】 复 选 框 ， 然 后 在 图 像 中 单 击 并 拖 动 鼠 标 ， 创 建 一 个 选区 选中 小 狗 ， 加 

如 图 13-123 所 示 。 恋 

EC 将 光标 定位 在 选区 内 ， 单 击 并 向 左下 方 拖 动 鼠标 ， 释 放 鼠 标 后 ， 选 区 周围 出 现 | 

一 个 方 框 ， 如 图 13-124 所 示 。 a 





图 13-122 ”复制 图 层 图 13-123 ”创建 一 个 选区 选中 小 狗 ”图 13-124 ”选区 周围 出 现 一 个 方 框 


EC 将 光标 定位 在 方 框 四 周 的 控制 点 上 ， 光 标 将 变 为 箭头 形状 ， 拖 动 鼠 标 可 调整 选 
区 的 大 小 ， 如 图 13-125 所 示 。 

ED 将 光标 定位 在 方 框 周 围 ， 光 标 将 变 为 弯曲 的 箭头 形状 ， 拖 动 鼠标 可 旋转 选区 ， 
如 图 13-126 所 示 。 

EED9p 设置 完成 后 ， 按 Enter 键 ， 即 可 移动 小 狗 ， 并 调整 小 狗 的 大 小 和 角度 ， 而 小 狗 原 
来 的 位 置 被 修复 为 绿色 草地 样式 ， 如 图 13-127 所 示 。 


NN 








图 13-125 ”调整 选区 的 大 小 图 13-126 ”旋转 选区 图 13-127 最 终 效 果 


13.3.5 ”案例 19 一 一 消除 照片 中 的 红眼 


红眼 工具 国 | 可 消除 用 闪光 灯 拍 摄 的 人 物 照 片 中 的 红眼 ， 也 可 以 消除 用 闪光 灯 拍 摄 的 动物 
照片 中 的 白色 或 绿色 反光 。 下 面 使 用 红眼 工具 消除 人 物 照片 中 的 红眼 。 具 体操 作 步 又 如 下 。 
EEC 打开 “素材 \ch1321jpg” 文 件 ， 在 【图 层 】 面 板 中 按 Ctl+J 组 合 键 复制 图 层 ， 
如 图 13-128 所 示 。 
EDUD9 选择 红眼 工具 图， 将 光标 定位 在 红眼 区 域 中 ， 如 图 13-129 所 示 。 


和 
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EECRS 单 击 鼠 标 即 可 消除 红眼 ， 使 用 同样 的 方法 ， 消 除 其 他 区 域 中 的 红眼 ， 如 图 13-130 
所 示 。 





图 13-128 ”复制 图 层 图 13-129 ”将 光标 定位 在 红眼 区 域 中 ”图 13-130 单 击 鼠 标 消除 红眼 





13.4 ”通过 图 像 或 图 案 修饰 图 像 


图 章 工具 组 通常 用 于 复制 图 像 或 图 案 ， 还 可 用 于 除去 瑕 疯 。 该 工具 组 共 包 含 两 个 工具 ， 
分 别 是 仿制 图 章 工具 和 图 案 图 章 工 具 ， 如 图 13-131 所 示 。 


13.4.1 案例 20 一 一 通过 复制 图 像 修饰 图 像 


仿制 图 章 工具 国 用 来 复制 取样 的 图 像 ， 并 将 其 绘制 到 其 他 区 
域 或 者 其 他 图 像 中 。 此 外 ， 该 工具 能 够 按 涂抹 的 范围 复制 出 取样 点 周围 全 部 或 者 部 分 图 像 。 
Sn 修复 画笔 工具 和 仿制 图 章 工具 都 可 以 修复 图 像 ， 其 原理 都 是 将 取样 点 处 的 图 像 复 
SS 。 制 到 目标 位 置 。 两 者 之 间 不 同 的 是 ， 前 者 是 无 损 仿制 ， 即 将 取样 的 图 像 原 封 不 动 地 复 
制 到 目标 位 置 ， 而 后 者 有 一 个 计算 的 过 程 ， 它 可 将 取样 的 图 像 融合 到 目标 位 置 。 但 在 
修复 明 瞳 对 比 强烈 的 边缘 时 ， 使 用 修复 画笔 工具 容易 出 现 计算 错误 ， 此 种 情况 下 可 用 
仿制 图 章 工具 。 


下 面 使 用 仿制 图 章 工具 将 一 幅 图 像 中 的 女孩 复制 到 另 一 幅 图 像 中 。 具 体操 作 步 又 如 下 。 

EEJDp 打开 “素材 ch13\22.jpg” 和 “素材 'ch13\23.jpg” 文 件 ， 如 图 13-132 和 图 13-133 

EY 远 择 仿制 图 章 工具 国 ， 把 光标 定位 在 女孩 头 部 ， 按 住 Alt 键 并 单 击 鼠标 ， 设 置 
该 点 为 取样 点 ， 然 后 将 光标 定位 在 另 一 幅 图 像 中 ， 单 击 鼠标 即 可 复制 取样 点 ， 如 





图 13-131 图 章 工 具 组 


图 13-134 所 示 。 








图 13-132 素材 文件 22.jpg 图 13-133 素材 文件 23.jpg 图 13-134 ”复制 取样 点 


合 28s 
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ES 若 单 击 并 拖 动 鼠 标 ， 可 涂抹 出 女孩 的 身体 ， 而 不 仅仅 是 头 部 ， 如 图 13-135 所 示 。 
EC 若 在 工具 选项 栏 中 设置 【不 透明 度 】 为 20%， 将 涂抹 出 透明 效果 的 女孩 ， 如 
图 13-136 所 示 。 





图 13-135 涂抹 出 女孩 的 身体 图 13-136 ”涂抹 出 透明 效果 的 女孩 


六 国 苇 丰 丁 嵌 到 一 于 六 败 泪 禄 困 癌 习 村 小 忆 


13.4.2 ”案例 21 一 一 通过 图 案 修饰 图 像 


使 用 图 案 图 章 工具 国 |， 可 以 利用 图 案 进行 绘画 。 下 面 使 用 图 案 图 章 工 具 ， 为 花瓶 绘制 图 
案 。 有 具体 操作 步骤 如 下 。 

EEJDp 打开 “素材 \ch13\24.jpg” 文 件 ， 如 图 13-137 所 示 。 

ED 在 【图 层 】 面 板 中 选择 背景 图 层 ， 按 Ctrl+J 组 合 键 复制 图 层 ， 如 图 13-138 所 示 。 

ECDIS 选择 快速 选择 工具 图， 创建 一 个 选区 ， 选 中 花瓶 ， 如 图 13-139 所 示 。 


图 13-137 素材 文件 图 13-138 ”复制 图 层 图 13-139 ”创建 选区 选中 花瓶 


AG 





EGG 选择 图 案 图 章 工具 EE 到 ， 设 置 【模式 】 为 【 柔 光 】， 然 后 单 击 国生 按钮 ， 在 弹出 
的 菜单 中 选择 “叶子 ”图 案 ， 如 图 13-140 所 示 。 

OTBY 单 击 并 拖 动 鼠 标 涂抹 ， 即 可 为 其 绘制 图 案 ， 如 图 13-141 所 示 。 

ECEJDy 按 CtrltD 组 合 键 ， 取 消 选 区 的 选择 ， 然 后 重复 步骤 3 到 步骤 5， 为 另 一 个 花瓶 
绘制 不 同 的 图 案 ， 如 图 13-142 所 示 。 





图 13-140 选择“ 叶子” 图案 图 13-141 在 选区 内 涂抹 以 绘制 图 13-142 ”为 另 一 个 花瓶 绘制 
图 案 不 同 的 图 案 
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13.5 “通过 橡皮 擦 修饰 图 像 


橡皮 擦 工具 组 可 以 更 改 图 像 的 像素 ， 有 选择 地 擦 除 部 分 图 
像 或 相似 的 颜色 。 该 工具 组 共 包 含 3 个 工具 ， 分 别 是 橡皮 擦 工 > 
具 、 背 景 橡皮 擦 工 具 和 魔术 橡皮 擦 工具 ， 如 图 13-143 所 示 。 "，j 让 让 悦 皮 抬 共 


13.5.1 案例 22 一 擦 除 图 像 中 指定 的 区 域 。 “9 


使 用 橡皮 擦 工具 国 ， 通 过 拖 动 鼠标 可 以 擦 除 图 像 中 的 指定 区 域 。 如 果 当 前 图 层 是 背景 图 
层 ， 那 么 擦 除 后 将 显示 为 背景 色 ; 如 果 是 普通 图 层 ， 那 么 擦 除 后 将 显示 为 透明 效果 。 
下 面 使 用 橡皮 擦 工具 ， 擦 除 花 灯 的 花蕊 部 分 。 具 体操 作 步 又 如 下 。 
ECXDp 打开 “素材 \ch13\25.jpg” 文 件 ， 如 图 13-144 所 示 。 
TPY 选择 李 圆 选 框 工具 国 ， 按 住 Shift 键 不 放 ， 单 击 并 拖 动 鼠 标 ， 
圆 形 选 枉 ， 选 中 花 条 的 花 营 部 分 ， 如 图 13-145 所 示 。 
EGRSD 选择 橡皮 擦 工具 医 下 ， 单 击 并 拖 动 鼠标 涂抹 选区 ， 即 可 擦 除 花蕊 ， 如 图 13-146 所 示 。 


具 E 





在 图 像 中 创建 一 个 





图 13-144 素材 文件 图 13-145 选中 花蕊 部 分 


13-146 ” 擦 除 花蕊 
13.5.2 ”案例 23 一 一 擦 除 图 像 中 的 指定 颜色 


背景 橡皮 擦 工具 国 是 一 种 擦 除 指定 颜色 的 擦 除 器 ， 它 可 以 自动 取样 橡皮 擦 笔尖 中 心 的 颜 
色 ， 然 后 擦 除 在 画笔 范围 内 出 现 的 这 种 颜色 。 使 用 该 工具 抠 取 图 像 非常 有 效 ， 尤 其 是 颜色 对 
比 明显 时 。 

下 面 使 用 背景 橡皮 擦 工具 抠 取 大 树 并 更 换 其 背景 。 具 体操 作 步 骤 如 下 。 

ED 打开 “素材 'ch13\26.jpg” 文 件 ， 如 图 13-147 所 示 。 

EDDD 选择 背景 橡皮 擦 工具 国 ， 在 工具 选项 栏 中 选择 合适 的 画笔 大 小 ， 并 设置 取样 方 

式 为 【取样 一 次 】、【 限 制 】 为 【不 连续 】、【 容 差 】 为 50%， 如 图 13-148 所 示 。 

ETE> 将 光标 定位 在 图 像 中 ， 此 时 显示 为 @@ 形 状 ， 正 中 间 十 字 表 示 取 样 的 颜色 ， 单 击 

鼠标 ， 即 可 以 擦 除 圆圈 范围 内 与 取样 的 颜色 相近 的 颜色 区 域 ， 如 图 13-149 所 示 。 

EGRZ 使 用 步 又 3 的 方法 ， 单 击 并 拖 动 鼠 标 ， 擦 除 背 景区 域 ， 如 图 13-150 所 示 。 


人 G20 





保护 前 景色 四 


图 13-147 素材 文件 13-148 ”在 背景 橡皮 擦 工具 选项 栏 中 设置 参数 





葡 林 发 态 册 殿 光一 一 对 进 对 活 : 殉 三 罚 习 由 ct 当 国 
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13-149 “” 擦 除 与 取样 的 颜色 相近 的 颜色 区 域 13-150” 擦 除 背 景区 域 


rr 若 要 擦 除 的 区 域 颜 色 一 致 ， 可 单 击 并 拖 动 鼠 标 直接 擦 除 。 若 颜色 不 一 致 ， 需 要 连 

SS 续 单 击 鼠 标 ， 以 取样 不 同 的 颜色 。 

EDUD) 在 【图 层 】 面 板 中 单 击 底部 的 【创建 新 图 层 】 按 钮 医 症 ， 新 建 一 个 空白 图 层 ， 然 后 
选中 新 建 的 图 层 1， 单 击 并 向 下 拖 动 鼠标 ， 使 其 位 于 图 层 0 的 下 方 ， 如 图 13-151 所 示 。 

EE 选择 图 层 1， 按 Altt+Delete 组 合 键 ， 为 其 填充 当前 的 前 景色 ， 如 图 13-152 所 示 。 


EC 此 时 即 成 功 抠 取 大 树 ， 并 为 其 更 换 背 景 ， 如 图 13-153 所 示 。 





图 13-151 将 图 层 1 调整 到 图 层 。 图 13-152 为 图 层 1 填充 当前 的 图 13-153 ”为 抠 出 的 大 树 
0 的 下 方 前 景色 更 换 背 景 


13.5.3 ”案例 24 一 一 擦 除 图 像 中 相近 的 颜色 


魔术 橡皮 擦 工具 国 相当 于 魔 棒 加 删除 命令 ， 使 用 该 工具 在 要 擦 除 的 颜色 范围 内 单 击 ， 就 
会 自动 地 探 除 掉 与 此 颜色 相近 的 区 域 。 使 用 该 工具 抠 取 图 像 非常 有 效 。 


-| 魔术 橡皮 擦 工具 和 背景 橡皮 擦 工具 通常 都 用 于 抠 取 图 像 。 不 同 的 是 ， 前 者 只 需要 单 


外 。 击 即 可 自动 擦 除 图 像 中 所 有 与 取样 颜色 相近 的 颜色 ， 而 后 者 只 能 在 画笔 范围 内 擦 除 
图 像 。 
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下 面 使 用 魔术 橡皮 擦 工具 抠 取 人 像 。 具 体操 作 步 又 如 下 。 

EC 打开 “素材 ch13\27jpg” 文 件 ， 如 图 13-154 所 示 。 

EDD) 过 择 魔 术 橡皮 擦 工具 国 ， 在 工具 选项 栏 中 设置 【 容 差 】 为 50， 并 取消 选中 【 连 
续 】 复 选 框 ， 如 图 13-155 所 示 。 





这 污 ” 目 对 所 有 图 层 取样 。 不适 明朗: 100% 时 

图 13-154 素材 文件 图 13-155 在 魔术 橡皮 擦 工具 选项 栏 中 设置 参数 

ETTRY 在 图 像 的 背景 处 单 击 ， 即 可 消除 与 此 单 击 点 的 颜色 相近 的 颜色 区 域 ， 如 图 13-156 
所 示 。 


EC 在 图 像 的 另 一 边 背 景 处 单 击 ， 即 可 抠 出 人 像 ， 如 图 13-157 所 示 。 





13-156 ”消除 与 单 击 点 颜色 相近 的 颜色 区 域 13-157” 抠 出 人 像 


13.6 ”修饰 图 像 中 的 细节 


模糊 工具 组 可 以 进一步 修饰 图 像 的 细节 。 该 工具 组 共 包 含 3 个 工 


A 合 模糊 工具 
具 ， 分 别 是 模糊 工具 、 锐 化 工具 和 涂抹 工具 ， 如 图 13-158 所 示 。 辣 : 人 
13.6.1 案例 25 一 一 修饰 图 像 中 生硬 的 边缘 图 13-158 “模糊 工具 组 





使 用 模糊 工具 轿 凤 5 以 柔 化 图 像 生硬 的 边缘 或 区 域 ， 减 少 图 像 的 细节 。 下 面 使 用 模糊 工具 
模糊 人 物 的 头像 。 具 体操 作 步 骤 如 下 。 
ET 打开 “素材 \ch13\28.jpg” 文 件 ， 如 图 13-159 所 示 。 
EZ> 选择 模糊 工具 国 ， 设 置 【模式 】 为 【 变 亮 】， 然 后 单 击 并 拖 动 鼠 标 在 人 物 头 像 
上 涂抹 ， 即 可 模糊 头像 ， 如 图 13-160 所 示 。 


G2 
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寺 圳 对 演 : 罕 困 昼 习 “ 册 81 小 





图 13-159 素材 文件 13-160 ”模糊 头像 


13.6.2 ”案例 26 一 一 提高 图 像 的 清晰 度 


使 用 锐 化 工具 国 可 以 增 大 像素 之 间 的 对 比 度 ， 以 提高 图 像 的 清晰 度 。 下 面 使 用 锐 化 工 
具 ， 使 花 采 更 加 清晰 。 有 具体 操作 步骤 如 下 。 
TIP 打开 “素材 \ch13\29.jpg” 文 件 ， 如 图 13-161 所 示 。 
EZ> 选择 锐 化 工具 国 ， 设 置 【模式 】 为 【正常 】， 然 后 单 击 并 拖 动 鼠 标 在 花 杂 上 涂 
抹 ， 即 可 使 花灯 更 加 清晰 ， 如 图 13-162 所 示 。 


EL 


MAG8 





图 13-161 素材 文件 13-162 ”使 花 条 更 加 清晰 


13.6.3 ”案例 27 一 一 通过 涂抹 修饰 图 像 


使 用 涂抹 工具 医 国 可 以 模拟 类 似 于 手指 在 湿 颜 料 上 擦 过 产生 的 效果 。 下 面 使 用 涂抹 工具 使 
小 狗 的 耳 杂 变 长 。 具 体操 作 步 又 如 下 。 

EEJDp 打开 “素材 \ch13\30.jpg” 文 件 ， 如 图 13-163 所 示 。 

EEP9 选择 涂抹 工具 ， 根 据 需 要 设置 画笔 的 大 小 ， 然 后 取消 选中 【手指 绘画 】 复 选 
框 ， 如 图 13-164 所 示 。 

EC) 在 耳 条 上 单 击 并 拖 动 鼠标 向 上 涂抹 ， 即 可 使 小 狗 的 耳 杂 变 长 ， 如 图 13-165 所 示 。 

EC 若 在 工具 选项 栏 中 选中 【手指 绘画 】 复 选 框 ， 那 么 在 涂抹 时 将 添加 前 景色 ， 如 
图 13-166 所 示 。 
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对 所 有 图 层 了 样 


图 13-163 素材 文件 图 13-164 ”在 涂抹 工具 选项 栏 中 设置 参数 
图 13-165 ”使 小 狗 的 耳朵 变 长 图 13-166 ”在 涂抹 时 将 添加 前 景色 





13.7 ”通过 调 色 修饰 图 像 


调 色 工具 组 用 于 调整 图 像 的 明暗 度 以 及 图 像 色 彩 的 饱和 度 。 该 
工具 组 共 包含 3 个 工具 ,分 别 是 减 淡 工 具 、 加 深 工 具 和 海绵 工具 ， 
如 图 13-167 所 示 。 











图 13-167 ” 调 色 工具 组 
13.7.1 案例 28 一 一 减 淡 工 具 和 加 深 工具 


减 淡 工具 国 I 和 加 深 工具 攻 归 可 以 调节 图 像 特定 区 域 的 曝光 度 ， 以 提高 或 降低 图 像 的 亮 
度 。 在 摄影 时 ， 摄 影 师 减弱 光线 可 以 使 照片 中 的 某 个 区 域 变 亮 ( 减 淡 )， 或 增加 曝光 度 使 照片 中 
的 区 域 变 暗 ( 加 深 )。 减 淡 和 加 深 工 具 的 作用 就 相当 于 摄影 师 调节 光线 。 
下 面 分 别 使 用 减 淡 工具 和 加 深 工 具 ， 提 高 或 降低 小 狗 的 亮度 。 具 体操 作 步 又 如 下 。 
EI 打开 “素材 \ch1331jpg” 文 件 ， 使 用 快速 选择 工具 国 ， 创 建 一 个 选区 ， 选 中 小 
狗 ， 如 图 13-168 所 示 。 

ET 选择 减 淡 工 具 国 |， 保持 各 项 参数 不 变 ， 可 根据 需要 设置 画笔 的 大 小 ， 然 后 单 击 
并 拖 动 鼠标 在 选区 中 涂抹 ， 即 可 提高 小 狗 的 亮度 ， 如 图 13-169 所 示 。 

四 TB》 若 选 择 加深 工 具 攻 I]， 在 选区 中 涂抹 ， 则 可 降低 小 狗 的 亮度 ， 如 图 13-170 所 示 。 








13-168 ”创建 选区 选中 小 狗 13-169 ”提高 小 狗 的 亮度 


13-170 ”降低 小 狗 的 亮度 
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13.7.2 ”案例 29 一 一 改变 图 像 色 彩 的 饱和 度 


使 用 海绵 工具 国 国 可 以 更 改 图 像 色 彩 的 饱和 度 。 在 灰 度 模式 下 ， 该 工具 通过 使 灰 阶 远离 或 
靠近 中 间 灰 色 来 增加 或 降低 对 比 度 。 

下 面 使 用 海绵 工具 使 花 儿 的 颜色 更 加 鲜艳 突出 。 具 体操 作 步 又 如 下 。 

ECJDp 打开 “素材 ch13\24.jpg” 文 件 ， 如 图 13-171 所 示 。 

TY 选择 海绵 工具 国 ， 设 置 【模式 】 为 【加 色 】， 单 击 并 拖 动 鼠标 在 花 打 上 涂抹 ， 
即 可 使 花 儿 的 颜色 更 加 鲜艳 突出 ， 如 图 13-172 所 示 。 

EEC) 若 在 工具 选项 栏 中 设置 【模式 】 为 【去 色 】， 那 么 可 使 花 儿 的 颜色 暗淡 无 光 ， 
如 图 13-173 所 示 。 


图 13-171 素材 文件 图 13-172 使 花 儿 的 颜色 鲜艳 突出 。 图 13-173 ”使 花 儿 的 颜色 暗淡 无 光 


13.8 ”综合 案例 一 一 制作 放射 线 背 景 图 


杂 色 渐变 是 指 在 指定 的 色彩 范围 内 随机 地 分 布 颜色 ， 其 颜色 变化 效果 更 加 丰富 。 下 面 利 
用 杂 色 渐变 制作 一 个 放射 线 背 景 图 像 。 具 体操 作 步 骤 如 下 。 

EC 启动 Photoshop 软件 ， 按 Ctl+N 组 合 键 ， 弹 出 【新 建 】 对 话 框 ， 在 其 中 设置 参 
数 ， 新 建 一 个 空白 文件 ， 然 后 将 背景 色 设置 为 黑色 ， 如 图 13-174 所 示 。 

TZY 选择 渐变 工具 国 ， 在 选项 栏 中 单 击 【 角 度 渐变 】 按 馈 国 ， 然 后 单 击 肝 扩 钮 ， 在 
弹出 的 面板 中 选择 需要 的 渐变 色 ， 如 图 13-175 所 示 。 

EECRS 单 击 选项 栏 中 的 渐变 色 ， 弹 出 【渐变 编辑 器 】 对 话 框 ， 在 其 中 将 【渐变 类 型 】 
设置 为 【 杂 色 】， 【粗糙 度 】 设 置 为 100%6，【 颜 色 模型 】 设 置 为 LAB， 如 图 13-176 


所 示 。 
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图 13-174 ”新 建 一 个 文件 并 设置 背景 色 。 ”图 13-175 选择 渐变 色 。 图 13-176 【渐变 编辑 器 】 对 话 框 
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ES 单 击 【 确 定 】 按 钮 ， 返 回 到 新 建文 档 中 ， 从 窗口 右上 角 往 左下 方 拖 动 鼠标 ， 释 
放 鼠 标 后 ， 即 可 使 用 杂 色 渐变 创建 一 个 放射 线 效果 ， 如 图 13-177 所 示 。 

EC 按 Cul+U 组 合 键 ， 弹 出 【色相 /饱和 度 】 对 话 框 ， 在 其 中 根据 需要 设置 色相 及 饱 
和 度 ， 如 图 13-178 所 示 。 

EC) 单 击 【确定 】 按 钮 ， 即 可 调整 杂 色 渐变 的 颜色 ， 如 图 13-179 所 示 。 
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图 13-177 ”创建 一 个 放射 线 效果 图 13-178 【色相 /饱和 度 】 图 13-179 调整 杂 色 渐变 的 颜色 
对 话 框 


13.9 疑难 解 惑 


疑问 1: 在 Photoshop 中 仿制 图 章 工具 和 修补 画笔 工具 有 什么 异同 ? 


答 : 在 Photoshop 中 ， 仿 制图 章 工具 是 从 图 像 中 的 某 一 部 分 取样 之 后 ， 再 将 取样 绘制 到 其 
他 位 置 或 其 他 图 片 中 。 而 修补 画笔 工具 和 仿制 图 章 工具 十 分 类 似 ， 不 同 之 处 在 于 仿制 图 章 工 
具 是 将 取样 部 分 全 部 照搬 ， 而 修补 画笔 工具 会 对 目标 点 的 纹理 、 阴 影 、 光 照 等 因素 进行 自动 
分 析 并 匹配 ， 从 而 使 修复 后 的 像素 不 留 痕迹 地 融入 图 像 的 其 余部 分 。 


疑问 2: 在 使 用 仿制 图 章 工具 时 ， 光 标 中 心 的 十 字 线 有 什么 用 处 ? 


答 : 在 使 用 仿制 图 章 工 具 时 ， 按 住 Alt 键 在 图 像 中 单 击 ， 定 义 要 复制 的 内 容 ， 然 后 将 光 
标 放 在 其 他 位 置 ， 放 开 Alt 键 拖 动 鼠标 涂抹 ， 即 可 将 复制 的 图 像 应 用 到 当前 位 置 。 与 此 同 
时 ， 画 面 中 会 出 现 一 个 圆 形 光标 和 一 个 十 字形 光标 。 圆 形 光标 是 用 户 正 在 涂抹 的 区 域 ， 而 该 
区 域 的 内 容 则 是 从 十 字形 光标 所 在 位 置 的 图 像 上 拷贝 的 。 在 操作 时 ， 两 个 光标 始终 保持 相同 
的 距离 ， 用 户 只 要 观察 十 字形 光标 位 置 的 图 像 ， 便 知道 将 要 涂抹 出 什么 样 的 图 像 内 容 了 。 





第 14 章 
网 页 中 的 路 标 与 导航 


一 一 制作 网 页 按钮 
与 导航 条 


按钮 是 网 页 设计 不 可 缺少 的 基础 元 素 之 一 。 按 钮 作为 页 面 的 重要 视觉 元 素 ， 放 
置 在 明显 、 易 找 、 易 读 的 区 域 是 必要 的 。 导 航 条 也 是 网 页 设计 不 可 缺少 的 基础 元 素 
之 一 。 导 航 条 不 仅仅 是 信息 结构 的 基础 分 类 ， 也 是 浏览 网 站 的 路 标 。 本 章 主要 介绍 
几 种 常见 按钮 与 导航 条 的 制作 。 
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14.1 按钮 与 导航 条 的 设计 原则 


按钮 和 导航 条 在 网 页 中 是 不 可 缺少 的 元 素 ， 但 在 设计 按钮 与 导航 条 时 ， 也 要 符合 网 页 的 
整体 风格 以 及 注意 相关 设计 事项 。 


14.1.1 网 页 按钮 的 设计 注意 事项 


按钮 代表 着 “做 某 件 事 ”， 即 单 击 了 按钮 代表 着 操作 了 一 个 功能 ， 做 的 这 件 事 是 有 后 果 
的 ， 不易 挽 回 的 。 例 如 注册 、 单 击 进入 等 ， 它 们 的 共同 点 是 : 都 是 在 “做 ”一 件 事 ， 并 且 绝 
大 多 数 都 是 对 表单 的 提交 。 

在 了 解 了 按钮 的 作用 后 ， 下 面 就 来 介绍 在 设计 网 页 按钮 时 所 应 注意 的 事项 。 


按钮 的 颜色 应 该 区 别 于 它 周 边 的 环境 色 ， 因 此 它 要 更 
图 14-1 
亮 而 且 有 高 对 比 度 的 颜色 ， 如 图 14-1 所 示 。 人 


2. 按钮 的 位 置 


按钮 的 位 置 也 需要 仔细 考究 ， 其 基本 原则 是 要 容易 找到 ， 特 别 重要 的 按钮 应 该 处 在 画面 
的 中 心 位 置 。 


3. 按钮 的 文字 


在 按钮 上 使 用 什么 文字 传递 给 用 户 非常 重要 。 需 要 言 简 意 凡 ， 直 接 明了 ， 如 : 注册 、 下 
载 、 创 建 、 免 费 试 玩 等 ， 甚 至 有 时 用 “点 击 进入 ”， 这 一 点 上 就 是 千 万 不 要 让 观 者 去 思考 ， 
越 简单 、 越 直接 越 好 。 


4. 按钮 的 尺寸 


通常 来 讲 ， 一 个 页 面 中 按钮 的 大 小 也 决定 了 其 本 身 的 重要 级 别 。 但 也 不 是 越 大 越 好 ， 尺 
寸 应 该 适中 ， 因 为 按钮 大 到 一 定 程度 ， 会 让 人 觉得 它 不 像 按 钮 。 


14.1.2 ”网 页 导航 条 的 设计 注意 事项 


导航 条 是 最 早出 现在 网 页 上 的 页 面 元 素 之 一 。 它 既是 网 站 路 标 ， 又 是 分 类 名 称 ， 是 十 分 
重要 的 。 导 航 条 应 放置 到 明显 的 页 面 位 置 ， 让 浏览 者 在 第 一 时 间 内 看 到 它 并 做 出 判断 ， 确 定 
要 进入 哪个 栏目 中 去 搜索 他 们 所 要 的 信息 。 

在 设计 网 站 导航 条 的 时 候 ， 一 般 来 说 要 注意 以 下 几 点 。 

(1) 网 站 导航 条 的 色彩 要 与 网 站 的 整体 相 融 合 ， 在 色彩 的 选用 上 不 要 求 像 网 站 的 Logo、 
网 站 的 Banner 那样 的 鲜明 色彩 。 

(2) 放置 在 网 站 正文 的 上 方 或 者 下 方 ， 这 样 的 放置 主要 是 针对 网 站 导航 条 ， 能 够 为 精心 
设计 的 导航 条 提供 一 个 很 好 的 展示 空间 。 如 果 网 站 使 用 的 是 列表 导航 ， 也 可 以 将 列表 放置 在 





网 站 正文 的 两 侧 。 
(3) 导航 条 层次 清晰 ， 能 够 简单 明了 地 反映 访问 者 所 浏览 的 层次 结构 。 
(4) 尽 可 能 多 地 提供 相关 资源 的 链接 。 


14.2 制作 按钮 


在 个 性 张扬 的 今天 ， 互 联网 也 注重 个 性 的 发 展 。 不 同 的 网 站 采用 不 同 的 按钮 样式 ， 按 钮 
设计 的 好 坏 直接 影响 了 整个 站 点 的 风格 。 下 面 介绍 几 款 常 用 按钮 的 制作 。 


14.2.1 案例 1 一 一 制作 普通 按钮 


面 对 色 彩 丰 富 繁杂 的 网 络 世界 ， 普 通 简洁 的 按钮 赁 其 大 方 经 典 的 样式 得 以 永存 。 制 作 普 
通 按钮 的 具体 操作 步骤 如 下 。 
EDp 打开 Photoshop， 按 Ctrl+N 组 合 键 ， 打 开 【 新 建 】 对 话 框 ， 设 置 宽 250px、 高 为 
250px， 并 命名 为 【普通 按钮 】， 如 图 14-2 所 示 。 
EEJDy 单 击 【 确 定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 14-3 所 示 。 
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图 14-2 【新 建 】 对 话 框 14-3 ”新 建 空白 文档 


ETBY 新 建 图 层 1， 选 择 椭圆 选 框 工具 ， 按 住 Shift 键 的 同时 在 图 像 窗 口 画 出 一 个 
200pxx200px 的 正 圆 ， 如 图 14-4 所 示 。 

YY 选择 渐变 工具 ， 并 设置 渐变 颜色 为 R:102，G:102，B:155) 到 (R:230，G:230， 
B:255) 的 渐变 ， 如 图 14-5 所 示 。 

EECJDoy 在 圆 形 选 框 上 方 单 击 并 向 下 拖 中 鼠标， 填充 从 上 到 下 的 渐变 ， 然 后 按 Ctrlt+D 组 
合 键 取消 选区 ， 如 图 14-6 所 示 。 

本 TB 新建 图 层 2， 再 用 椭圆 选 框 工具 画 出 一 个 170pxx170px 的 正 圆 ， 用 渐变 工具 进行 
从 下 到 上 的 填充 ， 如 图 14-7 所 示 。 

ECXD9 选中 图 层 1 和 图 层 2， 然 后 单 击 下 方 的 【链接 】 按 钮 ， 链 接 两 个 图 层 ， 如 图 14-8 
所 示 。 

EEC 选择 移动 工具 ， 单 击 上 方 工具 栏 选 项 中 的 【垂直 居中 对 齐 】 和 【水 平 居中 对 
齐 】 按 钮 ， 以 图 层 1 为 准 ， 对 齐 图 层 2， 效 果 如 图 14-9 所 示 。 
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14-4 绘制 正 圆 14-5 【渐变 编辑 器 】 对 话 框 图 14-6 填充 从 上 到 下 的 渐变 





图 14-7 从 下 到 上 的 填充 图 14-8 ”链接 两 个 图 层 图 14-9 对 齐 图 层 


EC) 选中 图 层 2， 为 图 层 添加 【和 斜面 和 浮雕 】 效果， 具体 的 参数 设置 如 图 14-10 所 示 。 
ECG 挝 中 图 层 2， 为 图 层 添 加 【 描 边 】 效 果 ， 具 体 的 参数 设置 如 图 14-11 所 示 。 
ED 最 后 得 到 效果 如 图 14-12 所 示 的 普通 按钮 。 
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图 14-10 ”设置 斜面 和 浮雕 图 14-11 设置 描 边 图 14-12 ”完成 按钮 的 制作 


全 300 


14.2.2 ”案例 2 一 一 制作 迷你 按钮 


信息 在 网 络 上 有 着 重要 的 地 位 。 很 多 人 不 想 放 过 可 以 放 一 点 信息 的 空间 ， 于 是 采用 迷你 


按钮 ， 可 爱 又 不 失 得 体 ， 很 受 年 轻 人 士 的 喜爱 。 
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制作 迷你 按钮 的 具体 操作 步骤 如 下 。 

EDp 打开 Photoshop， 按 Ctrl+N 组 合 键 ， 打 开 【 新 建 】 对 话 框 ， 设 置 宽 为 60 像素 、 
高 为 60 像素 ， 并 命名 为 【迷你 按钮 】， 如 图 14-13 所 示 。 

EECRD9 单 击 【确定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 14-14 所 示 。 

EEJey 新 建 图 层 1， 用 椭圆 选 框 工具 在 图 像 窗 口 画 一 个 50 像素 x50 像素 的 正 圆 ， 填 充 
橙色 (R:255，G:153，B:0)， 如 图 14-15 所 示 。 












































图 14-13 【新 建 】 对 话 框 图 14-14 新建 一 个 空白 文档 图 14-15 画 正 圆 


EC 选择 【选择 】 一 【修改 】 一 【收缩 】 命 令 ， 打 开 【 收 缩 选 区 】 对 话 框 ， 设 置 
【收缩 量 】 为 7 像素 ， 如 图 14-16 所 示 。 

ED 单 击 【确定 】 按 钮 ， 可 以 看 到 收缩 之 后 的 效果 ， 然 后 按 Delete 键 删除 ， 可 以 得 
到 如 图 14-17 所 示 的 圆 环 。 


收缩 过 区 x 


收缩 量 (c): [ 玫 像素 
口 应 用 画布 边界 的 效果 。 「 取消 




















图 14-16 【收缩 选区 】 对 话 框 图 14-17 绘制 圆 环 


本 于 BY 双击 图 层 1， 调 出 【图 层 样式 】 对 话 框 ， 设 置 【 斜 面 和 浮雕 】 效 果 ， 具 体 的 参数 
如 图 14-18 所 示 。 

EET 单 击 【 确 定 】 按 钮 ， 得 到 如 图 14-19 所 示 的 圆 环 。 

ESTE 新 建 图 层 2， 用 椭圆 选 框 工具 画 一 个 36 像素 x36 像素 的 正 圆 ， 设 置 前 景色 为 白 
色 ， 背 景色 为 灰色 (R:207，G:207，B:207)， 如 图 14-20 所 示 。 

ET 按 住 Shift 键 的 同时 用 渐变 工具 从 左上 角 往 右 下 角 拉 出 渐变 ， 单 击 上 方 工具 栏 选 
项 中 的 【垂直 居中 对 齐 】 和 【水 平 居中 对 齐 】 按 钮 使 其 与 边框 对 齐 ， 如 图 14-21 所 示 。 
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14-18 ”设置 斜面 和 浮雕 的 参数 


失色 茶 育 宁 兰 ) 


14-19 ”添加 和 斜面 和 浮雕 后 的 圆 环 
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图 14-20 【 拾 色 器 背景 色 】 对 话 框 图 14-21 对齐 边框 


EEC 选中 图 慨 2 并 双击 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 其 中 设置 【斜面 和 浮 驹 】 参 
数 ， 如 图 14-22 所 示 。 


EEC 单 击 【确定 】 按 钮 ， 得 到 最 终 的 效果 ， 如 图 14-23 所 示 。 
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14-22 设置 【和 斜面 和 浮雕 】 参 数 14-23 ”添加 和 斜面 和 浮雕 后 的 效果 


EEP9 选择 自 定形 状 工 具 ， 在 上 方 出 现 的 工具 栏 选 项 中 选择 自己 喜欢 的 形状 ， 在 这 里 
选择 了 “ 必 ” 形 状 ， 如 果 找 不 到 这 个 形状 ， 可 以 单 击 形状 选择 菜单 右上 角 的 按钮 ， 
然后 选择 【全 部 】 命 令 ， 调 出 全 部 形状 ， 如 图 14-24 所 示 。 
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ES 新 建 路 径 1， 绘 制 大 小 合适 的 形状 ， 再 右 击 路 径 1， 在 弹出 的 快捷 菜单 中 选择 





【建立 选区 】 命 令 ， 如 图 14-25 所 示 。 

















浓 车 如 灿 葛 游 罚 司 认 二 一 一 尝 相 册 膏 螨 否 千 呈 习性 了 | 小 





EEID 双击 图 层 3， 在 弹出 的 对 话 框 中 选中 【内 阴影 】 复 选 框 ， 设 置 相关 参数 ， 如 图 14-27 
所 示 。 
本 单 击 【确定 】 按 钮 ， 得 到 最 终 效 果 ， 如 图 14-28 所 示 。 











图 14-26 填充 颜色 图 14-27 设置 内 阴影 图 14-28 ”最 终 效果 


14.2.3 ”案例 3 一 一 制作 水 晶 按 钮 


水 晶 按 钮 可 以 说 是 最 受 欢迎 的 按钮 样式 之 一 。 通 过 设置 图 层 样式 可 以 制作 水 晶 按 钮 。 下 
而 就 教 大 家 制作 一 款 橘红 色 的 水 晶 按 钮 。 具 体操 作 步 又 如 下 。 
ESIIP 打开 Photoshop， 按 CtrlHN 组 合 键 ， 打 开 【 新 建 】 对 话 框 ， 设 置 宽 为 15 厘米 、 
高 为 15 厘米 ， 并 命名 为 【水 晶 按 钮 】， 如 图 14-29 所 示 。 
ETD 单 击 【确定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 14-30 所 示 。 
ESTEY 选择 椭圆 选 框 工具 ， 双 击 鼠 标 ， 在 【工具 】 面 板 上 部 出 现 的 选项 栏 里 设置 【 羽 
化 】 为 0 像素 ， 选 中 【消除 锯齿 】 复 选 框 ，【 样 式 】 设 为 【固定 大 小 】，【 宽 度 】 
设 为 350 像素 ，【 高 度 】 设 为 350px， 如 图 14-31 所 示 。 
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14-29 【新 建 】 对 话 框 14-30 新建 一 个 空白 文档 





14-31 【工具 】 面 板 


EC 新 建 一 个 图 层 1， 将 光标 移 至 图 像 窗 口 ， 单 击 鼠 标 左 键 ， 画 出 一 个 固定 大 小 的 圆 
形 选区 ， 如 图 14-32 所 示 。 

于 BY 选择 前 景色 为 (C:0，M:90，Y:100，K:0)， 设 置 背景 色 为 (C:0，M:40，Y:30， 
K:0)。 选 择 渐 变 工 具 ， 在 其 工具 栏 选 项 中 设置 过 渡 色 为 【前 景色 到 背景 色 渐变 】， 
渐变 模式 为 【线性 渐变 】， 如 图 14-33 所 示 。 

EEC 选择 图 层 1， 再 回 到 图 像 窗口 ， 在 选区 中 按 Shift 键 的 同时 由 上 至 下 画 出 渐变 

色 ， 按 Ctrl+D 组 合 键 取消 选区 ， 如 图 14-34 所 示 。 








图 14-32 ”绘制 圆 形 选区 图 14-33 渐变 工具 图 14-34 ”绘制 渐变 


ED 双击 图 层 1， 打 开 【 图 层 样式 】 对 话 框 ， 选 中 【投影 】 复 选 框 ， 设 置 暗 调 颜色 为 
(C:0，M:80，Y:80，K80)， 并 设置 其 他 相关 参数 ， 如 图 14-35 所 示 。 

ET 选中 【内 发 光 】 复 选 框 ， 设 置 发 光 颜 色 为 (C:0，M:80，Y:80，K:80)， 并 设置 其 
他 相关 参数 ， 如 图 14-36 所 示 。 

本 了 TB 单 击 【确定 】 按 钮 ， 可 以 看 到 最 终 的 效果 ， 这 时 图 像 中 已 经 初步 显示 出 红色 立 
体 按钮 的 基本 模样 了 ， 如 图 14-37 所 示 。 

EC 新 建 一 个 图 层 2， 选 择 椭圆 选 框 工具 ， 将 工具 选项 栏 中 的 【样式 】 设 置 改 为 【 正 
常 】， 在 图 层 2 中 画 出 一 个 椭圆 形 选 区 ， 如 图 14-38 所 示 。 
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14-35 ”设置 投影 14-36 ”设置 内 发 光 


EC 双击 【工具 】 面 板 中 的 【以 快速 蒙 版 模式 编辑 】 按 钮 ， 调 出 【快速 蒙 版 选项 】 
对 话 框 ， 设 置 【 蒙 版 颜色 】 为 蓝 色 ， 如 图 14-39 所 示 。 


x 
色彩 折 未: 
[加 被 区 版 区 域 N) 
口 所 这 区 二 (5) [Ca ] 
国 不 通明 度 (0): 


图 14-37 ”红色 立体 按钮 图 14-38 画 出 一 个 椭圆 形 选 区 。 图 14-39 【快速 蒙 版 选项 】 对 话 框 


EC 单 击 【 确 定 】 按 钮 ， 此 时 图 像 中 椭圆 选区 以 外 的 部 分 被 带 有 一 定 透 明度 的 蓝 色 
遮盖 ， 如 图 14-40 所 示 。 

配对 BY 选择 画笔 工具 ， 选 择 合适 的 笔 刷 大 小 和 硬度 ， 将 光标 移 至 图 像 窗口 ， 用 笔 刷 以 
蓝 色 蒙 版 色 遮 盖 部 分 椭圆 ， 如 图 14-41 所 示 。 

EEC》 单 击 【 工 具 】 面 板 中 的 【以 标准 模式 编辑 】 按 钮 ， 这 时 图 像 中 原来 椭圆 形 选区 
的 一 部 分 被 减 去 ， 如 图 14-42 所 示 。 


图 14-40” 蓝 色 庶 盖 图 14-41 ”遮盖 部 分 椭圆 图 14-42 减 去 椭圆 形 选区 的 一 部 分 
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E> 设置 前 景色 为 白色 ， 选 择 渐变 工具 ， 在 工具 选项 栏 的 渐变 编辑 器 中 设置 渐变 模 
式 为 【前 景 到 透明 】， 如 图 14-43 所 示 。 

EECD 按 住 Shift 键 ， 同 时 在 选区 中 由 上 到 下 填充 渐变 ， 然 后 按 CtrlHHH 组 合 键 隐 藏 选区 
观察 效果 ， 如 图 14-44 所 示 。 

EC 新 建 一 个 图 层 3， 按 住 Ctrl 键 ， 单 击 图 层面 板 中 的 图 层 1， 重 新 获得 圆 形 选区 ， 
在 菜单 中 执行 【选择 】 一 【修改 】 一 【收缩 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【收缩 
量 】 为 7 像素 ， 将 选区 收缩 ， 如 图 14-45 所 示 。 


图 14-43 渐变 工具 图 14-44 填充 渐变 并 隐藏 选区 图 14-45 将 选区 收缩 


EE 于 EY 选择 矩形 选 框 工具 ， 将 光标 移 至 图 像 窗口 ， 按 住 Alt 键 ， 由 选区 左上 部 拖 动 鼠标 
到 选区 的 右 下 部 四 分 之 三 处 ， 减 去 部 分 选区 ， 如 图 14-46 所 示 。 

EC) 仍 用 白色 作为 前 景色 ， 并 再 次 选择 渐变 工具 ， 渐 变 模式 设置 为 【前 景 到 透 
明 】， 按 住 Shift 键 的 同时 在 选区 中 由 下 到 上 做 渐变 填充 ， 之 后 按 Ctrl+H 组 合 键 隐 
藏 选区 观察 效果 ， 如 图 14-47 所 示 。 

EEZD 选中 图 层 3， 选 择 【 滤 镜 】 一 【模糊 】 一 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 的 
【半径 】 文 本 框 中 填 入 适当 的 数值 7， 如 图 14-48 所 示 。 



































bd x 
EE 3 
Lm |] 
Tp) 
Qa 1% Q 
OO OO PN: [7 | W 于 
14-46 ” 减 去 部 分 选区 图 14-47 ”隐藏 选区 后 的 效果 14-48 【高 斯 模糊 】 对 话 框 


EEC 单 击 【 确 定 】 按 钮 ， 添 加 上 高 斯 模糊 效果 ， 如 图 14-49 所 示 。 
EEE》 回 到 图 像 窗 口 ， 在 图 层面 板 中 把 图 层 3 的 【不 透明 度 】 设 置 为 65%。 至 此 ， 桶 
红色 水 晶 按 钮 就 制作 完成 了 ， 如 图 14-50 所 示 。 

ESPS 合并 所 有 图 层 ， 然 后 选择 【图 像 】 一 【调整 】 一 【色相 /饱和 度 】 命 令 ， 在 打开 
的 对 话 框 中 选中 【着 色 】 复 选 框 ， 可 以 对 按钮 进行 颜色 的 变换 ， 如 图 14-51 所 示 。 
EE ZE》 单 击 【确定 】 按 钮 ， 返 回 到 图 像 文件 之 中 ， 变 换 设置 后 的 最 终 效 果 如 图 14-52 

所 示 。 
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14-49 ”高 斯 模糊 效果 14-50 ”橘红 色 水 晶 按 钮 
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图 14-51 【色相 /饱和 度 】 对 话 框 图 14-52 设置 后 的 效果 





14.2.4 ”案例 4 一 一 制作 木 纹 按钮 


木 纹 按钮 的 制作 主要 是 利用 滤 镜 中 的 滤 镜 功能 来 完成 的 。 制 作 木 纹 按钮 的 具体 操作 步骤 
如 下 。 
EEC 打开 Photoshop， 按 CtrlHN 组 合 键 ， 新 建 一 个 宽 为 200px、 高 为 100px 的 文件 ， 
将 它 命名 为 【 木 纹 按钮 】， 如 图 14-53 所 示 。 
本 了 2 单 击 【 确 定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 14-54 所 示 。 
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图 14-53 【新 建 】 对 话 框 图 14-54 新建 一 个 空白 文档 
本 了 BY 背景 填充 为 白色 。 然 后 选择 【 滤 镜 】 一 【 杂 色 】 一 【添加 杂 色 】 命 令 ， 在 打开 
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的 对 话 框 中 ， 设 置 参数 【数量 】 为 400%，【 分 布 】 设 为 【高 斯 分 布 】， 再 选中 【 单 
色 】 复 选 框 ， 如 图 14-55 所 示 。 
EEC 单 击 【 确 定 】 按 钮 ， 效 果 如 图 14-56 所 示 。 


Er 问 
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图 14-55 【添加 杂 色 】 对 话 框 图 14-56 ”添加 杂 色 的 效果 


EEID 选择 【 滤 镜 】 一 【模糊 】 一 【动感 模糊 】 命 令 ， 打 开 【 动 感 模糊 】 对 话 框 ， 设 
置 【角度 】 为 0 或 180 度 ，【 距 离 】 为 999 像素 ， 单 击 【 确 定 】 按 钮 ， 如 图 14-57 
所 示 。 

四 TY 执行 【 滤 镜 】 一 【模糊 】 一 【高 斯 模糊 】 命 令 ， 打 开 【 高 斯 模糊 】 对 话 框 ， 设 
置 参数 【半径 】 为 1 像素 ， 单 击 【确定 】 按 钮 ， 得 到 如 图 14-58 所 示 的 效果 。 
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图 14-57 【动感 模糊 】 对 话 框 14- 58 【高 斯 模糊 】 对 话 框 


EC 按 Ctl+U 组 合 键 ， 弹 出 【色相 /饱和 度 】 对 话 框 ， 选 中 【着 色 】 复 选 框 ， 设 置 
【色相 】 为 36、【 饱 和 度 】 为 25、【 明 度 】 为 0， 单 击 【 确 定 】 按 钮 ， 如 图 14-59 
所 示 。 

EEC) 执行 【 滤 镜 】 一 【扭曲 】 一 【旋转 扭曲 】 命 令 ， 打 开 【 旋 转 扭曲 】 对 话 框 ， 设 
置 【角度 】 为 200 度 ， 得 到 如 图 14-60 所 示 的 效果 。 

EC 复制 背景 图 层 ， 新 建 路 径 1， 选 择 圆 角 矩形 工具 ， 在 上 方 的 工具 栏 选项 中 设置 
【半径 】 为 15 像素 ， 绘 制 出 按钮 外 形 ， 对 此 路 径 建 立 选 区 ， 选 择 【 选 择 】 一 【 反 
选 】 命 令 ， 按 Delete 键 删除 选区 部 分 ， 再 删除 背景 图 层 ， 如 图 14-61 所 示 。 



























































EC 最 后 添加 图 层 样式 ， 双 击 【背景 副本 】 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 为 图 
层 添 加 【斜面 和 浮雕 】 效 果 ， 参 数 设置 如 图 14-62 所 示 。 
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图 14-61 复制 背景 图 层 图 14-62 设置 斜面 和 浮雕 


EEC 为 图 层 添 加 【等 高 线 】 效 果 ， 参 数 设置 如 图 14-63 所 示 。 
EEC》 最 后 单 击 【确定 】 按 钮 ， 得 到 最 终 效 果 ， 如 图 14-64 所 示 。 


























图 14-63 ”设置 等 高 线 图 14-64 最终 效果 
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人 读者 还 可 以 通过 更 多 的 图 层 样式 把 按钮 做 得 更 加 精致 ， 甚 至 可 以 把 它 变 成 红木 
SS 的 ， 在 设计 家 居 网 页 时 或 许 是 种 不 错 的 选择 。 


14.3 ”制作 导航 条 


导航 条 的 设计 根据 具体 情况 可 以 有 多 种 变化 ， 它 的 设计 风格 决定 了 页 面 设 计 的 风格 。 常 
见 的 导航 条 有 横 排 导 航 、 坚 排 导航 等 。 
14.3.1 案例 5 一 一 制作 横向 导航 条 


NS (1) 制作 横向 导航 条 框架 。 有 具体 操作 步骤 如 下 。 
EEC 在 Photoshop CC 操作 界面 中 ， 选 择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建 】 对 


话 框 ， 在 其 中 设置 文档 的 宽度 、 高 度 等 参数 ， 如 图 14-65 所 示 。 
ECEIRP9 单 击 【 确 定 】 按 钮 ， 即 可 新 建 一 个 宽 为 500 像素 、 高 为 50 像素 的 文件 ， 并 将 其 


命名 为 【导航 条 】， 如 图 14-66 所 示 。 
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图 14-65 【新 建 】 对 话 框 图 14-66 新 建文 件 
EEC 新 建 图 民 1， 选 择 矩 形 选 杠 工具， 绘制 500 像素 x30 像素 的 导航 轮廓 ， 如 图 14-67 


所 示 。 





图 14-67 ”导航 轮廓 
EC 单 击 工具 箱 中 的 前 景色 色 块 ， 将 其 设置 为 橘 黄色 (R:234，G:151，B:77)。 然 后 使 


用 油漆 桶 工具 填充 选中 的 矩形 框 ， 如 图 14-68 所 示 。 


14-68 ”填充 导航 条 


合 310 





ER 双击 图 层 的 缩 览 图 ， 在 弹出 的 对 话 框 中 单 击 左 侧 的 【渐变 到 加 】 选 项 ， 设 置 填 
充 颜 色 ， 其 中 中 间 的 颜色 为 R:77，G:142，B:186)， 两 端 颜色 为 (R:8，G:123 ， 
B:109)， 如 图 14-69 所 示 。 

EET 选中 【 描 边 】 复 选 框 ， 设 置 描 边 的 颜色 为 (R:77，G:142，B:186)， 并 设置 其 他 参 
数 ， 如 图 14-70 所 示 。 





























[本 邓 | [二 aawE ] EE 
图 14-69 设置 渐变 又 加 图 14-70 ”设置 描 边 
ED 单 击 【 确 定 】 按 钮 ， 可 以 看 到 添加 之 后 的 颜色 ， 如 图 14-71 所 示 。 


图 14-71 添加 颜色 


(2) 制作 导航 条 上 的 斜纹 。 具 体操 作 步 又 如 下 。 
EEC 新 建 图 层 2， 按 住 Ctrl 键 的 同时 单 击 【 图 层 1】 图 层 读 取 选区 ， 执 行 【填充 】 命 
令 ， 在 其 中 设置 填充 图 案 ， 将 【不 透明 度 】 改 为 43%， 效 果 如 图 14-72 所 示 。 


Pr 


图 14-72 ”填充 新 建 图 层 
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EEDUD9 浙 建 一 个 图 层 3， 创 建 选区 ， 如 图 14-73 所 示 。 
EEJe) 填充 渐变 色 #366F99 到 #5891BA， 并 给 图 层 添加 【内 阴影 】 图 层 样 式 ， 参 数 设置 
如 图 14-74 所 示 。 
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14-73 ”创建 选区 14-74 ”设置 内 阴影 
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EC 添加 【 描 边 】 效果， 颜色 为 #44D8EBA， 【位 置 】 设 为 【内 部 】， 如 图 14-75 所 示 。 
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图 14-75 添加 【 描 边 】 样 式 图 14-76 ”添加 图 层 样式 后 的 效果 


芍 于 BY 复制 【图 层 3】 图 层 ， 将 其 移动 到 与 【图 层 3】 图 层 对 应 的 位 置 ， 如 图 14-77 所 示 。 

EC 新 建 图 层 4， 用 状 16B94 和 白色 绘制 所 需 图像 ， 在 不 取消 选区 的 情况 下 转换 到 
【通道 】 面 板 ， 新 建 Alphal 通道 ， 在 选区 内 由 上 到 下 填充 “白色 一 黑色 一 白色 ”的 
渐变 ， 在 按 住 Ctrl 键 的 同时 单 击 该 通道 ， 回 到 【图 层 4】 图 层 ， 按 Ctrl+Shift+I 组 合 
键 进行 反选 后 按 Delete 键 删除 ， 如 图 14-78 所 示 。 





图 14-77 复制 图 层 3 图 14-78 新 建 图 层 4 
ECERB 复制 几 个 该 图 层 ， 分 别 移动 到 合适 的 位 置 后 对 齐 并 合并 ， 如 图 14-79 所 示 。 


析 一 一 一 一 一 一 人 


图 14-79 合并 图 层 


EEJep 用 横 排 文 字 工 具 写 上 各 个 导航 文字 ， 合 并 后 加 上 【距离 】 和 【大 小 】 分 别 为 2 
像素 的 投影 ， 最 终 效果 如 图 14-80 所 示 。 
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14-80 ”书写 导航 文字 


售 312 


14.3.2 ”案例 6 一 一 制作 垂直 导航 条 


垂直 导航 条 在 网 页 中 应 用 普遍 。 使 用 Photoshop 可 以 制作 出 垂直 导航 条 。 具 体操 作 步 又 


如 下 。 
ED 新 建 一 个 宽 为 300px、 高 为 500px 的 文件 ， 将 它 命名 为 【垂直 导航 条 】， 如 图 14-81 
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所 示 。 
EEJP9 单 击 【确定 】 按 钮 ， 创 建 一 个 空白 文档 ， 如 图 14-82 所 示 。 
bE x = 
名 称 (N): [ 重 于 表 条 EE 
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Kh: 引 LRC ] 
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亿 志 长 丙 比方 形 信和 = 
图 14-81 【新 建 】 对 话 杠 图 14-82 创建 空白 文档 





EC) 在 工具 箱 中 单 击 【 前 景色 】 按 钮 ， 打 开 【 拾 色 器 (前 景色 )】 对 话 框 ， 设 置 前 景色 
为 灰色 (R:229，G:229，B:229)， 如 图 14-83 所 示 。 
ED 单 击 【确定 】 按 钮 ， 按 AlttDelete 组 合 键 ， 填 充 颜色 ， 如 图 14-84 所 示 。 
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口 只有 Web 曾 色 3 放 二 
图 14-83 【 拾 色 器 (前 景色 )】 对 话 框 图 14-84 ”填充 颜色 
ED 新 建 图 层 1， 使 用 矩形 选区 工具 绘制 矩形 区 域 ， 然 后 填充 为 白色 ， 如 图 14-85 


所 示 。 

EEC 双击 图 层 1， 打 开 【 图 层 样式 】 对 话 框 ， 给 该 图 层 添加 投影 、 内 阴影 、 渐 变 辣 加 
及 描 边 样 式 。 单 击 【 确 定 】 按 钮 ， 即 可 看 到 添加 图 层 样式 后 的 效果 ， 如 图 14-86 
所 示 。 

EC 选择 工具 箱 中 的 横 排 文 字 工具 ， 输 入 导航 条 上 的 文字 ， 并 设置 文字 的 颜色 、 大 
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小 等 属性 ， 如 图 14-87 所 示 。 


Close Tab 





图 14-85 ”新建 图 层 1 图 14-86 ”给 图 层 添加 样式 图 14-87 添加 横 排 文字 

EEJRB 选择 工具 箱 中 的 【 自 定义 形状 】 按 钮 ， 在 上 方 出 现 的 工具 栏 选 项 中 选择 自己 喜 
欢 的 形状 ， 如 图 14-88 所 示 。 

ECRD) 新 建 路 径 1， 绘 制 大 小 合适 的 形状 ， 再 右 击 路 径 1， 在 弹出 的 快捷 菜单 中 选择 
【建立 选区 】 命 令 。 新 建 图 层 3， 在 选区 内 填充 和 文字 一 样 的 颜色 ， 重 复 对 齐 操 
作 ， 效 果 如 图 14-89 所 示 。 

EC 合并 除 背 景 图 层 之 外 的 所 有 图 层 ， 然 后 复制 合并 之 后 的 图 层 ， 并 调整 其 位 置 。 
至 此 ， 就 完成 了 垂直 导航 条 的 制作 ， 最 终 的 效果 如 图 14-90 所 示 。 





图 14-88 选择 形状 图 14-89 ”新 建 路 径 1 和 图 层 3 图 14-90 最终 效 果 


14.4 ”综合 案例 一 一 制作 水 晶 风 格 网 站 导航 条 


在 设计 网 页 的 过 程 中 ， 水 晶 风 格 的 网 站 导航 条 是 经 常 被 使 用 的 。 下 面 介 绍 制作 水 晶 风格 
网 站 导航 条 的 具体 操作 步骤 。 
EC 启动 Photoshop CC， 选 择 【 文 件 】 一 【新 建 】 命 令 ， 打 开 【 新 建 】 对 话 框 ， 在 
其 中 设置 文档 的 宽度 、 高 度 等 参数 ， 如 图 14-91 所 示 。 
EEJ2p 单 击 【确定 】 按 钮 ， 创 建 一 个 600 像素 x140 像素 的 空白 文件 ， 如 图 14-92 所 示 。 
EESp 单 击 工具 箱 中 的 【 圆 角 矩形 工具 】 按 钮 ， 在 选项 栏 中 设置 圆 角 和 矩形 工具 的 【 半 
径 】 为 5 像素 ， 填 充 颜色 为 灰色 ， 绘 制 一 个 圆 角 和 矩形 ， 如 图 14-93 所 示 。 
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EEC 双击 圆 角 矩形 图 层 ， 打 开 【 图 层 样 式 】 对 话 框 ， 在 其 中 选择 【内 发 光 】 选 项 ， 
并 在 右 侧 设置 内 发 光 的 参数 ， 如 图 14-94 所 示 。 
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14-93 ”绘制 圆 角 矩 形 并 填充 灰色 14-94 设置 内 发 光 


本 于 BY 单 击 【 确 定 】 按 钮 ， 即 可 为 圆 角 矩形 添加 内 发 光 效 果 ， 如 图 14-95 所 示 。 

ES 双击 圆 角 矩形 图 层 ， 打 开 【 图 层 样 式 】 对 话 框 ， 在 其 中 选择 【渐变 全 加 】 选 
项 ， 然 后 单 击 【 渐 变 】 右 侧 的 颜色 条 ， 打 开 【 渐 变 编辑 器 】 对 话 框 ， 在 其 中 设置 渐 
变 的 颜色 ， 这 里 设置 渐变 颜色 为 : #5e80a3，#839db8，#b8c746， 如 图 14-96 所 示 。 
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ED 单 击 【 确 定 】 按 钮 ， 返 回 到 【图 层 样式 】 对 话 框 中 ， 并 设置 其 他 的 渐变 站 加 参 
数 ( 见 图 14-97)， 从 而 得 出 如 图 14-98 所 示 的 渐变 又 加 效果 。 
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图 14-97 设置 渐变 又 加 参数 图 14-98 ”添加 渐变 便 加 后 的 效果 


EEJRe 双击 圆 角 矩形 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 选 择 【 描 边 】 选 项 ， 并 在 右 侧 
设置 描 边 参数 ( 见 图 14-99)， 从 而 得 出 如 图 14-100 所 示 的 描 边 效果 。 

EC) 选择 工具 箱 中 的 横 排 文字 工具 ， 在 圆 角 矩形 上 输入 文字 ， 并 设置 文字 的 样式 、 
大 小 与 颜色 ， 如 图 14-101 所 示 。 
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图 14-99 设置 描 边 参数 图 14-100 添加 描 边 后 的 效果 


EEC 在 【图 层 】 面 板 中 选择 文字 所 在 图 层 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【 栅 格 
化 文字 】 命 令 ， 即 可 将 文字 图 层 转换 为 普通 图 层 ， 如 图 14-102 所 示 。 
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图 14-101 输入 文字 图 14-102 ”选择 【 栅 格 化 文字 】 命 令 


ES 双击 文字 所 在 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 其 中 选择 【 描 边 】 选 项 ， 并 在 
右 侧 设置 描 边 参数 ( 见 图 14-103)， 从 而 得 出 如 图 14-104 所 示 的 文字 描 边 效果 。 

臣 于 BY 新建 一 个 图 层 ， 然 后 使 用 和 矩形 选 框 工具 绘制 一 个 宽度 为 1 像素 、 高 度 为 40 像素 
的 矩形 ， 并 填充 矩形 为 白色 ， 如 图 14-105 所 示 。 


























图 14-103 设置 描 边 参数 图 14-104 添加 文字 描 边 效果 


EC 复制 矩形 条 所 在 图 层 ， 然 后 移动 矩形 条 至 其 他 位 置 ， 这 里 复制 两 个 矩形 条 ， 最 
终 得 到 的 导航 条 效果 如 图 14-106 所 示 。 

EE》 在 【图 层 】 面 板 中 选中 矩形 条 所 在 图 层 的 所 有 图 层 ， 按 Ctrl+E 组 合 键 ， 将 其 合 
并 成 一 个 图 层 ， 并 使 用 和 矩形 选 框 工具 选择 矩形 条 的 下 部 ， 选 择 【 选 择 】 一 【修改 】 
一 【羽化 】 命 令 ， 打开 【羽化 选区 】 对 话 框 ， 设 置 【 羽 化 半径 】 为 5 像素 ， 如 图 14-107 
所 示 。 





malejna 





图 14-105 ”绘制 矩形 条 图 14-106 ”复制 矩形 条 


EBY 单 击 【确定 】 按 钮 ， 返 回 到 Photoshop 工作 区 ， 然 后 按 Delete 键 删除 选区 ， 然 后 
使 用 同样 的 方法 羽化 并 删除 矩形 条 项 部 部 分 ， 最 后 得 出 如 图 14-108 所 示 的 导航 条 。 
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图 14-107 羽化 选区 图 14-108 羽化 矩形 条 的 项 部 


本 于 [BY 选择 文字 所 在 图 层 ， 在 【图 层 】 面 板 中 设置 图 层 的 混合 模式 为 【 柔 光 】， 如 图 14-109 
所 示 。 

EC 从 而 得 出 如 图 14-110 所 示 的 文字 效果 。 

EEC) 新 建 一 个 图 层 ， 然 后 使 用 矩形 选 框 工具 在 两 个 矩形 条 之 间 绘 制 一 个 矩形 ， 并 将 
和 矩形 填充 为 白色 ， 如 图 14-111 所 示 。 

EEC) 双击 和 矩形 所 在 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 其 中 选择 【渐变 登 加 】 选 
项 ， 并 设置 其 他 参数 ， 如 图 14-112 所 示 。 

EE ED 单 击 【 渐 变 】 右 侧 的 颜色 条 ， 打 开 【 渐 变 编辑 器 】 对 话 框 ， 在 其 中 设置 填充 的 
颜色 为 : 767595，#728fae，#b3c3d3， 如 图 14-113 所 示 。 
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14-109 设置 图 层 混合 模式 








图 14-111 ”绘制 矩形 


EEC 设置 完毕 后 ， 单 击 【确定 】 按 钮 ， 返 回 到 【图 层 样式 】 对 话 框 之 中 ， 再 次 单 击 
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图 14-112 ”添加 渐变 又 加 效果 


【确定 】 按 钮 ， 即 可 得 到 如 图 14-114 所 示 的 填充 效果 。 
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图 14-113 ”设置 渐变 填充 颜色 


EEEZ2 新 建 一 个 图 层 ， 使 用 矩形 选 框 工具 绘制 一 个 矩形 ， 并 填充 矩形 为 白色 ， 双 击 白 
色 和 矩形 所 在 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 为 其 添加 内 发 光 效 果 ， 具 体 参数 设置 
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图 14-114 ”设置 的 填充 效果 


如 图 14-115 所 示 ， 添 加 内 发 光 效 果 后 的 导航 条 如 图 14-116 所 示 。 





百 


一 
和 


证 了 


台 
































mm Ee sa 和 





14-115 ”设置 内 发 光 参数 14-116 ”添加 内 发 光 后 的 效果 


ER 双击 白色 和 矩形 所 在 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 选 择 【 渐 变 倒 加】 选项 ， 
并 在 右 侧 设 置 相关 参数 ( 见 图 14-117)， 从 而 得 到 如 图 14-118 所 示 的 导航 条 。 
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图 14-117 ”设置 渐变 合 加 参数 图 14-118 ”添加 渐变 僵 加 效果 


E 本 枕 多 双击 白色 矩形 所 在 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 选 择 【 描 边 】 选 项 ， 并 在 
右 侧 设置 相关 参数 ( 见 图 14-119)， 从 而 得 到 如 图 14-120 所 示 的 导航 条 。 
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图 14-119 设置 描 边 参数 图 14-120 ”添加 描 边 效果 


EEZD 使 用 横 排 文字 工具 在 白色 矩形 框 中 输入 文字 Search， 并 设置 字体 颜色 为 
#7B7B7B， 字 体 大 小 为 14 点 ， 字 体 样式 为 Segoe， 如 图 14-121 所 示 。 

E53 单 击 工 具 箱 中 的 【 自 定形 状 工具 】 按 钮 ， 并 在 选项 栏 中 单 击 【 形 状 】 右 侧 的 按 
钮 ， 在 弹出 的 面板 中 选择 【搜索 】 图 标 ， 如 图 14-122 所 示 。 

EE 区 2 在 白色 和 矩形 框 中 绘制 搜索 形状 ， 并 填充 形状 的 颜色 为 #7B7B7B， 从 而 得 到 如 图 14-123 
所 示 的 导航 条 。 至 此 ， 一 个 完整 的 水 晶 风格 网 站 导航 条 就 制作 完成 了 。 
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14-121 输入 文字 














14-123 ”水 晶 风格 导航 条 


@ 导航 条 上 的 文字 可 以 根据 自己 的 需要 任意 填写 。 如 图 14-124 所 示 为 一 个 中 文字 
i 注 。 样 的 导航 条 。 





14-124 ”中 文字 样 导航 条 


14.5 疑难 解 惑 


疑问 1: 是 否 可 以 为 段落 文本 应 用 变形 文字 效果 ? 

答 : 可 以 。Photoshop 可 以 为 点 文本 和 段落 文本 都 应 用 变形 文字 效果 。 当 对 段落 文本 应 用 
变形 文字 效果 后 ， 段 落 文本 框 会 同文 字 一 起 产生 相应 的 变形 ， 以 使 文字 在 该 形状 内 产生 变 
形 ， 并 在 该 形状 内 进行 排列 。 

疑问 2: 怎样 为 图 像 或 文字 添加 渐变 或 图 案 的 描 边 效果 ? 

答 : 要 为 图 像 或 文字 添加 渐变 或 图 案 的 描 边 效果 ， 最 简便 的 方法 是 为 图 像 或 文字 所 在 的 
图 层 添加 【 描 边 】 效 果 。 在 添加 【 描 边 】 效 果 时 ， 系 统 会 弹出 【图 层 样 式 】 对 话 框 ， 在 【 填 
充 类 型 】 下 拉 列 表 框 中 选择 【渐变 】 或 【图 案 】 选 项 ， 然 后 设置 用 于 填充 的 渐变 色 或 图 案 ， 
再 单 击 【 确 定 】 按 钮 即 可 。 
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第 15 童 
网 页 中 迷人 的 蓝海 


一 制作 网 页 特效 
边线 与 背景 


网 页 图 像 的 设计 ， 作 为 一 种 艺术 创作 ， 在 确定 其 设计 方案 时 我 们 要 考虑 立意 、 
为 像 、 格 局 这 几 个 方面 。 具 体 地 讲 ， 所 谓 立 意 就 是 确定 设计 的 内 容 ; 为 像 就 是 根据 
内 容 进 行 造型 ; 格局 就 是 整个 设计 图 的 结构 布局 。 本 章 就 来 制作 不 同 网 页 风格 的 图 
像 特效 。 
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15.1 制作 装饰 边线 


网 页 图 像 的 装饰 和 造型 不 同 于 绘画 ， 它 不 是 独立 的 造型 艺术 ， 它 的 任务 是 美化 网 页 的 页 
面 ， 给 浏览 者 以 美的 视觉 感受 。 网 页 艺术 的 造型 、 装 饰 ， 根 据 不 同 的 对 象 、 不 同 的 环境 、 不 
同 的 地 域 ， 其 在 设计 方案 中 的 体现 也 不 相同 。 


15.1.1 案例 1 一 一 制作 装饰 虚线 


虚线 在 网 页 中 无 处 不 在 ， 但 在 Photoshop 中 没有 虚线 画笔 。 这 里 教 大 家 两 个 简单 的 方法 。 

1. 通过 画笔 工具 实现 

有 具体 操作 步骤 如 下 。 

EECJTDp 按 CtrltN 组 合 键 ， 新 建 一 个 宽 为 400 像素 、 高 为 100 像素 的 文件 ， 将 它 命名 为 
【虚线 1】， 如 图 15-1 所 示 。 


ED 选择 面 笔 工 具 ， 单 击 上 方 的 工具 栏 右 端的 【切换 画笔 面板 】 按 钮 国 ， 调 出 【 面 
笔 】 面 板 ， 如 图 15-2 所 示 。 


















































新 于 x 
和 (N): [过 线 1 确定 
文档 类 型 白 定 jj 取消 
和 : 存续 (5)- 
更 席 Wi [100 | [ 生 素 | 关 枚 LEEE 
[和 表 
分 WERE[7z |[ 生 和 英寸 
也 模式 [Res 状 吧 :| [8 位 <] 
RA [ee I 图 像 大 小 : 
2 117.2k 


颜色 配置 文件 : | sRGB iEC619552.1 3 
像素 上 次 比 : | 方形 多 素 3 














图 15-1 【新 建 】 对 话 框 图 15-2 【画笔 ] 面板 
ECDIS 选择 【 尖 角 3】 画 笔 ， 再 选中 对 话 框 左边 的 【双重 画笔 】 复 选 框 ， 选 择 比 【 尖 角 
3】 粗 一 些 的 画笔 ， 在 这 里 选择 的 是 【 尖 角 9】 画 笔 ， 并 设置 其 他 参数 ， 可 以 看 到 对 
话 框 下 部 的 预览 框 中 已 经 出 现 了 虚线 ， 如 图 15-3 所 示 。 
EEC 新 建 图 层 1， 在 图 像 窗口 按 住 Shift 键 的 同时 画 出 虚线 ， 效 果 如 图 15-4 所 示 。 
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图 15-3 选择 笔画 图 15-4 画 出 虚线 站 
Be 通过 画笔 工具 实现 的 虚线 并 不 是 很 美观 ， 看 上 去 比较 随便 ， 而 且 画 出 来 的 虚线 的 


”颜色 和 真实 选择 的 颜色 有 出 入 。 下 面 介绍 用 【定义 图 案 】 来 实现 虚线 的 制作 。 
2. 通过 定义 图 案 实现 


EEC 按 CtltN 组 合 键 ， 新 建 一 个 宽 为 16 像素 、 高 为 2 像素 的 文件 ， 将 它 命名 为 
【虚线 图 案 】， 如 图 15-5 所 示 。 

EC 放大 图 像 ， 新 建 图 层 1， 用 和 矩形 选 框 工具 绘制 一 个 宽 为 8px、 高 为 2px 的 选区 ， 
在 图 层 1 上 填充 黑色 ， 取 消 选区 ， 如 图 15-6 所 示 。 














3 建 x 
名 种 (N): |[ 虚 续 图 案 | 确定 ] 
文档 类 型 | 犁 定 站 [到 
大 小 3 | 存 姥 祯 设 (5)..。 
枫 攻 Wi:116 ”|[ 像素 | EE 
高 朗 H): [2 [全 雪 
分 辩 肿 (RN: 7: 像素 | 英寸 
所 楼 式 : | RG8 疡 色 | [8 位 
痛 景 内 容 :| 白色 n 图 多 大 小 : 
高 织 96 字 节 


世 色 配置 立 件 :| 工作 中 的 RG8: sRSB IEC616 
像素 长 宽 比 : | 方形 像素 











图 15-5 【新 建 】 对 话 框 图 15-6 填充 选区 


EECDRB) 选择 【编辑 】 一 【定义 图 案 】 命 令 ， 打 开 【 图 案 名 称 】 对 话 框 ， 输 入 图 案 的 名 
称 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 15-7 所 示 。 

EC 按 Ctl+N 组 合 键 ， 在 弹出 的 对 话 框 中 新 建 一 个 宽 为 400 像素 、 高 为 100 像素 的 
文件 ， 将 它 命名 为 【虚线 2】， 如 图 15-8 所 示 。 
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人 过 ft:[ FUE 











图 15-7 【图 案 名 称 】 对 话 框 图 15-8 ”新 建文 件 


EC) 新 建 图 层 2， 用 算 形 选 框 工具 绘制 一 个 宽 为 350 像素 、 高 为 2 像素 的 选区 ， 如 
图 15-9 所 示 。 


EECRRUD 在 选区 内 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【填充 】 命 令 ， 打 开 【 填 充 】 对 话 
框 ， 其 中 【 自 定 图 案 】 选 择 之 前 做 的 【虚线 图 案 】， 如 图 15-10 所 示 。 





















































15-9 ”新 建 图 层 


EEC 单 击 【 确 定 】 按 钮 ， 即 可 填充 矩 
形 ， 然 后 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 
最 终 的 效果 如 图 15-11 所 示 。 


15-10 【填充 】 对 话 框 





15.1.2 ”案例 2 一 一 制作 内 藤 线 条 





内 嵌 线 条 在 网 页 设计 中 应 用 较 多 ， 主 要 用 来 


图 15-11 最 终 的 效果 
反映 自然 的 光照 效果 和 表现 界面 的 立体 感 。 
有 具体 操作 步骤 如 下 。 


EEC 按 Ctl+N 组 合 键 ， 新 建 一 个 宽 为 400 像素 、 高 为 40 像素 的 文件 ， 将 它 命名 为 
【内 嵌 线 条 】》， 如 图 15-12 所 示 。 


EC) 新 建 图 层 1， 选 择 一 些 中 性 的 颜色 填充 图 层 ， 如 这 里 选择 紫色 ， 使 线条 画 在 上 面 
可 以 看 得 清楚 ， 如 图 15-13 所 示 。 
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均 
NN: CC 于 ] 
文 六 类 台 | 自 定 9 EE 
EE 
mao [ 抽 PE 
i |[ 计 
分区; [7 
emst [BE] 
a 5 ss 
再 筑 pa 
着 名 可 轩 六 件 : [ 工作 中 的 RG6: sRGB IEC519 =] 
全票 长 多 比 : | 万 及 久 素 
图 15-12 【新 建 】 对 话 框 15-13 ”填充 图 层 


七 TB 新 建 图 层 2， 选 择 铅笔 工具 ， 线 宽 设置 成 1 像素 。 按 住 Shift 键 的 同时 在 图 像 上 
画 一 条 黑色 的 直线 。 画 好 一 条 后 可 以 再 复制 一 条 并 把 它们 对 齐 ， 如 图 15-14 所 示 。 
E53YY 新 建 图 层 3， 把 线 宽 设 置 成 2 像素 ， 然 后 再 按 上 面 的 方法 画 两 条 白色 的 线 ， 如 
图 15-15 所 示 。 








图 15-14 ”绘制 直线 图 15-15 设置 线 宽 


可 TY 把 图 层 3 拖 到 图 层 2 的 下 层 ， 然 后 选择 移动 工具 ， 把 两 条 白色 线条 拖 动 到 黑色 
线条 的 右 下 角 一 个 像素 处 ， 至 此 ， 可 以 看 到 添加 的 立体 效果 ， 如 图 15-16 所 示 。 

5 在 【图 层 】 面 板 上 设置 图 层 3 的 混合 模式 为 【 柔 光 】， 这 样 装 饰 性 内 榜 线 条 就 
制作 完成 了 ， 如 图 15-17 所 示 。 








ES 





文档 :46.9KJ185.6K 5 


15-16 ”立体 效果 15-17 ”设置 混合 模式 


15.1.3 ”案例 3 一 一 制作 和 斜纹 线条 


用 户 在 浏览 网 页 的 时 候 是 否 感 叹 斜纹 很 多 呢 ? 经 典 的 斜纹 ， 永 远 的 时 尚 ， 不 用 羡慕 ， 下 
面 我 们 也 来 做 一 款 和 斜纹 线条 ， 同 样 是 通过 定义 图 案 实现 的 。 
ETIP 掖 CultN 组 合 键 ， 新 建 一 个 宽 为 4 像素 、 高 为 4 像素 的 文件 ， 将 它 命名 为 【和 斜 
纹 图 案 】， 如 图 15-18 所 示 。 
S533 放大 图 像 ， 新 建 图 层 1， 用 和 矩形 选 框 工具 选择 选区 ， 如 图 15-19 所 示 。 
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二 x 
名 机 N): | 入 级 图 军 
文 机 类 型 | 自 十 本 | 
大 2 | 存 圭 柱 设 (5)..，] 
RW): Ea 5]| Me 
高): [< [有 
分 弄 率 [R): 172 像 过 (英寸 = 
[Re 新 B+] [8 全 +] 
WB [EB 0 图 入 大 小: 
Es 雪 字 节 
者 四 了 入 村 | 工作 中 的 Rs: sR6e 12c819 
你 攻克 | 方形 氏家 = 
15-18 【新 建 】 对 话 框 图 15-19 选择 选区 


TB 设置 前 景色 为 灰色 ， 按 AlttDelete 组 合 键 ， 填 充 选 区 ， 如 图 15-20 所 示 。 
EC 选择 【编辑 】 一 【定义 图 案 】 命 令 ， 打 开 【 图 案 名 称 】 对 话 框 ， 输 入 图 案 的 名 
称 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 15-21 所 示 。 





















图 安 各 徐 x 
sm] 
取消 
图 15-20 填充 选区 图 15-21 【图 案 名 称 】 对 活检 
GEE> 按 CultN 组 合 键 ， 新 建 任意 长 宽 的 文件 ， 将 它 命名 为 【 侠 纹 线条 】， 如 图 15-22 
所 示 。 


EEC 新 建 图 层 2， 按 Ctrl+A 组 合 键 全 选 ， 右 击 选区 ， 在 弹出 的 快捷 菜单 中 选择 【 填 
充 】 命 令 ， 打开 【填充 】 对 话 框 ，【 自 定 图 案 】 选 择 之 前 制作 的 【斜纹 图 案 】， 如 
图 15-23 所 示 。 



























































x 

确定 

二 证 

图 15-22 新 建文 件 图 15-23 【填充 】 对 话 框 


ET 单 击 【确定 】 按 钮 ， 即 可 得 到 如 图 15-24 所 示 的 效果 。 
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15-24 最终 效果 


15.2 ”制作 网 页 背景 图 片 


为 了 美化 页 面 ， 图 片 是 必 不 可 少 的 页 面 元 素 之 一 。 网 页 设计 中 的 图 片 从 用 途上 分 为 背景 
图 和 插图 两 种 。 背 景 图 在 网 页 设计 发 展 初 期 只 发 挥 了 强调 质地 感 的 作用 和 修饰 页 面 的 功能 。 


15.2.1 案例 4 一 一 制作 渐变 背景 图 片 


在 Photoshop CC 中 可 以 制作 出 很 多 种 背景 效果 。 背 景 对 整个 网 页 来 说 是 非常 重要 的 一 部 
分 。 制 作 渐变 背景 图 片 的 具体 操作 步骤 如 下 。 
EC 新 建 一 个 600 像素 x500 像素 的 图 像 文件 并 用 渐变 色 工具 填充 ， 在 【渐变 编辑 
器 】 对 话 框 中 对 各 项 进行 设置 ， 其 中 颜色 条 最 左边 的 颜色 为 妆 C580E， 最 右边 的 颜 
色 为 #A4D23B， 如 图 15-25 所 示 。 
EC 设置 从 下 到 上 的 渐变 ， 填 充 完成 后 的 图 像 效果 如 图 15-26 所 示 。 


针 台 由 沾 辣 海 志恒 习 六 起 一 一 少 胖 否 六 伴生 凡 恒山 91 小 鲁 
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15-25 【渐变 编辑 器 】 对 话 框 图 15-26 ”填充 渐变 


EC) 新 建 图 层 1， 然 后 再 次 选中 渐变 工具 ， 设 置 各 项 参数 ， 其 中 颜色 条 最 右边 的 颜色 
为 #36bcd4， 如 图 15-27 所 示 。 
EEC 设置 从 左 到 右 的 渐变 ， 填 充 完成 后 的 页 面 效果 如 图 15-28 所 示 。 
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图 15-27 设置 渐变 参数 


图 15-28 填充 渐变 
选择 钢笔 工具 ， 然 后 在 图 层 1 上 建立 路 径 ， 如 图 15-29 所 示 。 
路 径 做 好 以 后 ， 按 Ctrl+Enter 组 合 键 将 其 转换 成 选区 ， 其 效果 如 图 15-30 所 示 。 





图 15-29 建立 路 径 图 15-30 路径 转换 为 选区 


ET 选择 渐变 工具 ， 然 后 在 打开 的 【渐变 编辑 器 】 对 话 框 中 设置 各 项 参数 ， 其 中 最 
左边 的 颜色 为 #fffffff， 如 图 15-31 所 示 。 


ET 新 建 图 层 2， 然 后 在 新 建 的 图 层 中 做 出 如 图 15-32 所 示 的 渐变 ， 并 设置 图 层 的 不 
透明 度 为 40%。 


可 并 
OO- 
_ 存 由 (5).。 | 
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15-31 设置 渐变 


15-32 ”填充 渐变 
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四 于 BY 为 了 避免 图 片 单调 ， 重 复 步骤 $ 到 步骤 8 的 操作 ， 完 成 后 的 图 片 效果 如 图 15-33 
所 示 。 
EC 在 图 层 调 板 中 单 击 【 背 景 】 图 层 前 面 的 眼睛 图 标 ， 将 【背景 】 图 层 隐 藏 起 来 ， 
然后 再 次 新 建 图 层 3， 然 后 选择 【图 像 】 一 【应 用 图 像 】 命 令 ， 打 开 【 应 用 图 像 】 
对 话 框 ， 如 图 15-34 所 示 。 
多 应 用 图 像 x 


| 于 [#1 :] | [| 















国 层 : [ 合并 图 大 nD 
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| 取消 
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15-33 最终 效果 图 15-34 【应 用 图 像 】 对 话 框 


EY 单 击 【 确 定 】 按 钮 ， 即 可 将 该 图 层 应 用 到 整个 图 像 中 ， 如 图 15-35 所 示 。 
EC) 选择 【 滤 镜 】 一 【模糊 】 一 【高 斯 模糊 】 命 令 ， 打 开 【 高 斯 模糊 】 对 话 框 ， 设 
置 【半径 】 为 7， 如 图 15-36 所 示 。 


涛 台 册 沾 兰 海 直 喇 习 六 起 一 一 内 用 下 








图 15-35 应 用 图 像 后 的 效果 图 15-36 【高 斯 模糊 】 对 话 框 


GEE> 设置 完毕 后 单 击 【 确 定 】 按钮 ， 即 可 对 新 建 图 层 应 用 高 斯 模糊 渡 镜 ， 如 图 15-37 
所 示 。 

EE 选择 【小 镜 】--【 锐 化 】--【 锐 化 】 命 令 ， 即 可 对 图 像 进行 锐 化 处 理 。 至 此 ， 
一 个 渐变 背景 就 制作 完成 了 ， 如 图 15-38 所 示 。 

Wt “ee 





图 15-37 ”高 斯 模糊 效果 15-38” 锐 化 后 的 效果 
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15.2.2 ”案例 5 一 一 制作 透明 背景 图 像 


制作 透明 背景 图 像 的 方法 就 是 创建 好 选区 以 后 ， 将 其 背景 删除 即 可 。 有 具体 操作 步骤 如 下 。 

EECIDp 打开 “素材 \ch15\ 苹 果 jpg” 文 件 。 如 图 15-39 所 示 。 

EIY 选择 【图 像 】 一 【计算 】 命 令 ， 弹 出 【计算 】 对 话 框 ,在 【 源 1】 区 域 的 【 通 
道 】 下 拉 列 表 框 中 选择 【 蓝 】 色 ， 选 中 【 反 相 】 复 选 框 ， 在 【 源 2】 区 域 的 【 通 
道 】 下 拉 列 表 框 中 选择 【灰色 】 选 项 ， 选 中 【 反 相 】 复 选 框 ，【 混 合 】 选 择 【 相 
加 】 选 项 ， 调 整 【 补 偿 值 】 为 -100， 单 击 【确定 】 按 钮 ， 如 图 15-40 所 示 。 
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图 层 [ 到 景 引 


确定 
通 半 [到 $] MD) 











MCP) 
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图 司 : [ 天 虹 use 
通关 | 灰色 引 网 把 相 V 
虱 言 : 相 加 3] 
不 和 明度 (0); [100 ] % 。 裤 信 但: [-100 ] 六 ie):[1 ] 
口 得 版 q.. 
结果 ; [ 新 建 通关 让 
图 15-39 打开 素材 图 15-40 【计算 】 对 话 框 


ER 打开 【通道 】 面 板 ， 产 生 新 的 Alpha 1 通道， 如 图 15-41 所 示 。 
EC) 返回 图 像 界面 ， 图 像 呈现 高 度 曝光 效果 ， 如 图 15-42 所 示 。 








图 15-41 【通道 】 面 板 图 15-42 高度 曝 光 效 果 


EEDpp 选择 【图 像 】 一 【调整 】 一 【 色 阶 】 命 令 ， 弹 出 【 色 阶 】 对 话 框 ， 在 【通道 】 
下 拉 列 表 框 中 选择 Alpha 1 拖 动 滑 块 ， 使 图 像 边缘 更 细致 ， 如 图 15-43 所 示 。 

EECDD 选择 工具 栏 中 的 橡皮 擦 工具 ， 设 置 背 景色 为 白色 ， 擦 除 图 像 轮廓 中 的 黑 灰 色 区 
域 ， 效 果 如 图 15-44 所 示 。 

TP 打开 【通道 】 面 板 ， 显 示 RGB 通道 ， 按 住 Ctrl 键 ， 单 击 Alpha 1 通道 ， 生 成 如 

图 15-45 所 示 的 图 像 选 区 。 
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于 BY 按 Ctrl+J 组 合 键 ， 复 制 选 区 生成 的 新 图 层 为 图 层 1， 隐 藏 原始 图 层 0， 得 到 如 
图 15-46 所 示 的 最 终 效果 。 
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预 说 ()，[ 自 定 *] 0 谤 定 
六 [ 取消 
通道 : | Apha 1 3 
新入 吧 队 (D): [BaoA ] 
[Cemn.- | 
Pd 
也 预览 (p) 
证 
[ 本 | ps ] 
霸 出 色 阶 (D): 
£ a 
G [5 
15-43 【 色 阶 】 对 话 框 15-44 设置 后 的 效果 





图 15-45 生成 图 像 选 区 图 15-46 最 终 效果 


pr 使 用 【文件 】 菜 单 中 的 【存储 为 Web 所 用 格式 】 命 令 可 以 保存 透明 图 像 。 如 果 


六 在 对 话 框 中 选择 GIF， 就 会 显示 GIF 保存 格式 的 相关 选项 ， 此 时 选中 【透明 度 〗 复 选 
框 ， 就 会 按 透明 图 像 保 存 。 


15.3 ”综合 案例 一 一 制作 梦幻 星光 网 页 背景 


梦幻 的 放射 线 星 光 背 景 效 果 ， 经 常用 于 一 些 海报 背景 的 设计 。 下 面 介绍 制作 梦幻 放射 星 
光 背 景 网 页 效果 的 具体 操作 步骤 。 

EC 按 CtlHN 组 合 键 ， 新 建 一 个 宽 为 1027 像素 、 高 为 768 像素 的 文件 ， 将 它 命名 
为 【网 页 背景 】， 如 图 15-47 所 示 。 

ET 单 击 【确定 】 按 钮 ， 即 可 创建 一 个 空白 文件 ， 如 图 15-48 所 示 。 

ES 单 击 工具 栏 中 的 前 景色 图 标 ， 打 开 【 拾 色 器 (前 景色 )】 对 话 框 ， 在 其 中 设置 前 景 
色 为 蓝 色 ， 具 体 的 RGB 值 为 (6.114.187)， 如 图 15-49 所 示 。 

E37Y 单 击 【 确 定 】 按 钮 ， 返 回 到 Photoshop 工作 界面 ， 将 文件 颜色 填充 为 前 景色 ， 如 
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图 15-50 所 示 。 
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15-47 【新 建 】 对 话 框 
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jw [zo] 要 OE [55 ] 
ca on 
DID 











;ei ] 站 
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15-49 【 拾 色 器 (前 景色 )】 对 话 框 图 15-50 填充 颜色 


EECDp 打开 【通道 】 面 板 ， 新 建 Alpha 1 通道 ， 如 图 15-51 所 示 。 
EED 选择 【 滤 镜 】 一 【 泻 染 】 一 【纤维 】 命 令 ， 打 开 【 纤 维 】 对 话 框 ， 在 其 中 设置 
相关 参数 ， 如 图 15-52 所 示 。 








Alpha1 











图 15-51 新 建 Alpha 1 通道 图 15-52 【纤维 】 对 话 框 


EC 单 击 【 确 定 】 按 钮 ， 即 可 得 到 应 用 纤维 效果 后 的 图 像 效 果 ， 如 图 15-53 所 示 。 
EEJB 选择 【 滤 镜 】 一 【模糊 】 一 【动感 模糊 】 命 令 ， 打 开 【 动 感 模糊 】 对 话 框 ， 在 
其 中 设置 相关 参数 ， 如 图 15-54 所 示 。 


S 332 





























前 守 (J: [50 | 原 ey 
路 训 (0); [599 | 外 素 











图 15-53 ”应 用 纤维 后 的 图 像 效果 图 15-54 【动感 模糊 】 对 话 框 


EC) 单 击 【 确 定 】 按 钮 ， 即 可 得 到 应 用 动感 模糊 滤 镜 后 的 图 像 效 果 ， 如 图 15-55 所 示 。 
EC 选择 【 滤 镜 】 一 【扭曲 】 一 【 极 坐标 】 命 令 ， 打 开 【 极 坐标 】 对 话 框 ， 在 其 中 
设置 相关 参数 ， 如 图 15-56 所 示 。 


| | | | | 中 
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图 15-55 ”应 用 动感 模糊 后 的 效果 图 15-56 【 极 坐标 】 对 话 框 
EY 单 击 【 确 定 】 按 钮 ， 即 可 得 到 应 用 极 坐 标 滤 镜 后 的 图 像 效 果 ， 如 图 15-57 所 示 。 
EEP% 在 【通道 】 面 板 中 ， 按 住 Ctrl 键 ， 用 鼠标 左 键 单 击 通道 Alpha 1， 得 到 选区 ， 如 

图 15-58 所 示 。 








图 15-57 ”应 用 极 坐 标 滤 镜 后 的 图 像 效 果 15-58 ”选择 选区 
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EC) 在 【通道 】 面 板 中 显示 RGB 通道 ， 隐 藏 Alpha 1 通道 ， 如 图 15-59 所 示 。 
EC 返回 到 【图 层 】 面 板 ， 新 建 一 个 图 层 ， 用 白色 填充 选区 ， 如 图 15-60 所 示 。 























图 15-59 隐藏 Alpha 1 通道 图 15-60 填充 选区 为 白色 


EEQD) 选择 工具 箱 中 的 椭圆 选 框 工具 ， 设 置 其 羽化 像素 为 50 像素 ， 绘 制 出 一 个 圆 形 选 
框 ， 如 图 15-61 所 示 。 

EY 单 击 【 图 层 】 面 板 中 的 【添加 蒙 版 】 按 钮 ， 即 可 为 图 层 添加 一 个 蒙 版 ， 如 图 15-62 
所 示 。 

















图 15-61 绘制 圆 形 选 框 图 15-62 添加 蒙 版 


EC 添加 蒙 版 后 ， 得 出 如 图 15-63 所 示 的 图 像 效 果 。 

EC 使 用 画笔 工具 绘制 星星 ， 对 于 具体 的 绘制 效果 ， 用 户 可 以 根据 需要 进行 绘制 ， 
如 图 15-64 所 示 。 

EEC) 新 建 一 个 图 层 ， 在 极 坐 标 中 心 点 的 下 方 绘制 一 个 椭圆 ， 并 填充 椭圆 为 白色 ， 如 
图 15-65 所 示 。 

EEZD 使 用 剪裁 工具 将 图 像 中 多 余 的 部 分 剪裁 掉 ， 即 可 得 到 如 图 15-66 所 示 的 网 页 
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15-64 ”绘制 星星 图 形 





图 15-65 ”绘制 椭圆 并 填充 白色 
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图 15-66 ”剪裁 图 像 


15.4 疑难 解 惑 


疑问 1: 为 什么 将 相同 选项 设置 的 滤 镜 应 用 于 不 同 的 图 像 中 ， 得 到 的 图 像 效 果 会 有 些 差 
异 呢 ? 


答 : 滤 镜 是 以 像素 为 单位 对 图 像 进行 处 理 的 ， 因 此 在 对 不 同 像素 的 图 像 应 用 相同 参数 的 
滤 镜 时 ， 所 产生 的 效果 可 能 也 会 有 些 差距 。 

疑问 2: 将 文字 转换 为 普通 图 层 后 ， 是 否 还 可 以 恢复 文字 所 在 的 图 层 为 文字 图 层 ? 

答 : Photoshop 不 具备 将 普通 图 层 转换 为 文字 图 层 的 功能 。 不 过 ， 如 果 在 将 文字 图 层 转换 
为 普通 图 层 后 ， 未 对 该 文档 进行 超过 20 步 的 操作 ， 那 么 用 户 就 可 以 通过 【历史 记录 】 调 板 ， 
将 文档 恢复 为 转换 文字 图 层 为 普通 图 层 前 的 状态 。 但 是 ， 如 果 已 经 对 该 文档 进行 了 超过 20 步 
的 操作 ， 那 么 就 不 能 进行 此 种 状态 的 还 原 了 。 这 是 因为 在 默认 状态 下 ，【 历 史记 录 】 调 板 只 
会 记录 对 当前 文档 所 进行 的 最 近 20 步 的 操作 。 


第 16 章 
网 页 中 的 标志 与 旗帜 


一 一 制作 网 页 Logo 
与 网 贡 iBarmer 


Logo 的 中 文 含义 就 是 标志 、 标 识 。 作 为 独特 的 传媒 符号 ，Logo 一 直 是 传播 特 
殊 信息 的 视觉 文化 语言 。Logo 自身 的 风格 对 网 站 设计 也 有 一 定 的 影响 。Banner 中 
文 含义 是 旗帜 、 横 幅 和 标语 ， 通 常 被 称 为 网 络 广告 。 网 页 Banner 一 般 可 以 放置 在 
网 页 上 的 不 同位 置 ， 在 用 户 浏览 网 页 信息 的 同时 ， 能 吸引 用 户 对 于 广告 信息 的 关 
注 ， 从 而 达到 网 络 营销 的 效果 。 本 章 主要 介绍 如 何 制作 网 页 Logo 与 网 页 Banner。 
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16.1 网 页 Logo 与 Banner 概述 


Logo 是 标志 的 意思 ， 是 一 个 网 站 形象 的 重要 体现 ， 如 同 网 站 的 商标 一 样 ， 是 互联 网 上 各 
个 网 站 用 来 链接 和 识别 的 一 个 图 形 标 志 。 一 组 国外 优秀 网 站 的 标识 (Logo) 如 图 16-1 所 示 。 
Banner 是 旗帜 的 意思 ， 在 网 页 中 称 作 旗帜 广告 或 横幅 广告 ， 是 网 络 广 告 的 主要 形式 ， 一 般 使 
用 GIF 格式 的 图 像 文件 ， 可 以 使 用 静态 图 形 ， 也 可 以 使 用 多 帧 图 像 拼 接 为 动画 图 像 。 


% 





Peace 





16-1 一 组 网 站 标识 
16.1.1 网 页 Logo 设计 标准 


网 页 Logo 就 是 网 站 标志 ， 它 的 设计 要 能 够 充分 体现 一 个 公司 的 核心 理念 ， 并 且 在 设计 上 
要 追求 动感 、 活 力 、 简 约 、 大 方 和 高 品位 ， 另 外 在 色彩 搭配 、 美 观 方面 也 要 多 加 注意 ， 要 使 
人 看 后 印象 深刻 。 

在 设计 网 页 Logo 时 ， 需 要 对 应 用 于 各 种 条 件 做 出 相应 规范 ， 如 用 于 广告 类 的 Logo、 用 
于 链接 类 的 Logo， 这 对 指导 网 站 的 整体 建设 有 着 极为 现实 的 意义 。 

(1) 色彩 方面 。 需 要 规范 Logo 的 标准 色 、 设 计 可 能 被 应 用 的 恰当 的 背景 配色 体系 、 反 
白 ， 在 清晰 表现 Logo 的 前 提 下 制定 Logo 最 小 的 显示 尺寸 。 另 外 ， 也 可 以 为 Logo 制定 一 些 
特定 条 件 下 的 配色 、 辅 助 色 带 等 方便 在 制作 Banner 等 场合 的 应 用 。 图 16-2 所 示 为 Logo 色彩 
方面 的 示例 。 

(2) 布局 方面 。 应 注意 文字 与 图 案 边 缘 应 清晰 ， 字 与 图 案 不 宜 相交 个 。 另 外 还 可 考虑 
Logo 竖 排 效果 ， 考 虑 作为 背景 时 的 排列 方式 等 。 图 16-3 所 示 为 Logo 布局 方面 的 示例 。 
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图 16-2 Logo 色彩 方面 图 16-3 ”Logo 布局 方面 
(3) 视觉 与 造型 。 应 该 考虑 到 网 站 发 展 到 一 个 高 度 时 相应 推广 活动 所 要 求 的 效果 ， 使 其 
在 应 用 于 各 种 媒体 时 ， 也 能 发 挥 充分 的 视觉 效果 同时 应 使 用 能 够 给 予 多 数 观众 好 感 而 受 欢 
迎 的 造型 。 图 16-4 所 示 为 Logo 视觉 与 造型 方面 的 示例 。 
(4) 介质 效果 。 应 该 考虑 到 Logo 在 传真 、 报 纸 、 杂 志 等 纸 介质 上 的 单 色 效果 、 反 白 效 
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果 、 在 织物 上 的 纺织 效果 、 在 车 体 上 的 油漆 效果 ， 制 作 徽 章 时 的 金属 效果 、 墙 面 立体 的 造型 
效果 等 。 图 16-5 所 示 为 Logo 介质 效果 的 示例 。 

8848 网 站 的 Logo 就 因为 忽略 了 字体 与 背景 的 合理 搭配 ， 圈 住 4 字 的 圈 成 了 8 的 背景 ， 
使 其 在 网 上 彩色 下 能 辨认 的 标识 在 报纸 上 做 广告 时 糊涂 一 片 ， 这 样 的 设计 与 其 努力 上 市 的 定 
位 相去 其 远 ， 如 图 16-6 所 示 。 
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16-4 Logo 视觉 与 造型 16-5 Logo 介质 效果 16-6 8848 网 站 Logo 
比较 简单 的 办 法 之 一 是 把 标识 处 理 成 黑白 ， 能 正确 良好 地 表达 Logo 含义 的 即 为 合格 。 


16.1.2 ”网 页 Logo 的 标准 尺寸 


Logo 的 国际 标准 规范 是 为 了 便于 在 Intemet 上 信息 的 传播 。 目 前 国际 上 规定 的 Logo 标准 
尺寸 有 下 面 3 种 ， 并 且 每 一 种 广告 规格 的 使 用 也 都 有 一 定 的 范围 (单位 : 像素 px)。 

(1) 88x31。 主 要 用 于 网 页 链接 或 网 页 小 型 Logo。 

这 种 规格 的 Logo 是 网 络 中 最 普通 的 友情 链接 Logo。 这 种 Logo 通常 被 放置 到 别人 的 网 站 
中 显示 ， 让 别 的 网 站 用 户 单 击 这 个 Logo 进入 到 你 的 网 站 。 几 乎 所 有 网 站 的 友情 链接 所 用 的 
Logo 尺寸 均 是 这 个 规格 ， 其 好 处 是 视觉 效果 好 ， 占 用 空间 小 ， 如 图 16-7 所 示 。 
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16-7 ”友情 链接 Logo 
(2) 120x60。 这 种 规格 主要 用 做 Logo 广告 。 


一 般 用 在 网 站 首页 面 的 Logo 广告 如 图 16-8 所 示 。 
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16-8 网 站 首页 Logo 
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Ry) 仿生 ”CI 六 .. 
酶 天 再 光 E35 es i 和 
图 16-8 网 站 首页 Logo( 续 ) 
(3) 120x90。 主 要 应 用 于 产品 演示 或 大 型 Logo， 如 图 16-9 所 示 。 
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图 16-9 大 型 Logo 
16.1.3 ”网 页 Logo 的 一 般 形式 


作为 具有 传媒 特性 的 Logo， 为 了 在 最 有 效 的 空间 内 实现 所 有 的 视觉 识别 功能 ， 一 般 是 特 
定 图 案 与 特定 文字 的 组 合 ， 起 到 出 示 、 说 明 、 沟 通 、 交 流 的 作用 ， 从 而 引导 受众 的 兴趣 ， 达 
到 增强 美誉 、 记 忆 等 目的 。 

网 页 Logo 表现 形式 的 组 合 方式 一 般 分 为 特 示 图 案 、 特 示 文 字 、 合 成 文字 。 

(1) 特 示 图 案 。 属 于 表象 符号 ， 独 特 、 醒 目 、 图 案 本 身 易 被 区 分 、 记 忆 ， 通 过 隐喻 、 联 
想 、 概 括 、 抽 象 等 绘画 表现 方法 表现 被 标识 体 ， 对 其 理念 的 表达 概括 而 形象 ， 但 与 被 标识 体 
关联 性 不 够 直接 ， 受 众 容易 记忆 图 案 本 身 ， 但 对 被 标识 体 的 关系 的 认 知 需要 相对 较 曲 折 的 过 程 ， 
但 一 旦 建立 联系 ， 印 象 较 深刻 ， 对 被 标识 体 记忆 相对 持久 。 图 16-10 所 示 为 特 示 图 案 示例 。 

(2) 特 示 文 字 。 属 于 表意 符号 。 在 沟通 与 传播 活动 中 ， 反 复 使 用 的 被 标识 体 的 名 称 或 是 
其 产品 名 ， 用 一 种 文字 形态 加 以 统一 ， 含 义 明确 、 直 接 ， 与 被 标识 体 的 联系 密切 ， 易 于 被 理 
解 、 认 知 ， 对 所 表达 的 理念 也 具有 说 明 的 作用 ， 但 因为 文字 本 身 的 相似 性 易 模 糊 受 众 对 标识 
本 身 的 记忆 ， 从 而 对 被 标识 体 的 长 久 记忆 发 生 弱化 ， 图 16-11 所 示 为 特 示 文 字 示 例 。 





图 16-10 “” 特 示 图 案 图 16-11 特 示 文字 
(3) 合成 文字 。 这 是 一 种 表象 表意 的 综合 ， 即 指 文字 与 图 案 结合 的 设计 ， 兼 具 文 字 与 图 
案 的 属性 。 但 都 导致 相关 属性 的 影响 力 相 对 弱化 ， 为 了 不 同 的 对 象 取向 ， 制 作 偏 图 案 或 偏 文 
字 的 Logo， 会 在 表达 时 产生 较 大 的 差异 。 例 如 ， 只 对 印刷 字体 做 简单 修饰 ， 或 把 文字 变 成 一 
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种 装饰 造型 让 大 家 去 猜 。 


16.1.4 网 页 Banner 的 标准 尺寸 


几 种 国际 尺寸 (单位 : 像素 ) 的 Banner 为 : 468x60( 全 尺寸 Banner)、392x72( 全 尺寸 带 导航 
条 Banner)、234x60( 半 尺寸 Banner)、125x125( 方 形 按 钮 )、120x90( 按 钮 类 型 1 )、120x60( 按 钮 
类 型 2)、88x31( 小 按钮 )、120x240( 垂 直 Banner)， 其 中 468x60 和 88x31 两 种 规格 最 常用 。 


16.1.5 ”Banner 设计 的 注意 要 点 


设计 Banner 时 需要 注意 以 下 几 点 。 

(1) Banner 上 的 字体 。 建 议 采 用 Bold Sans Serif 字体 。 

(2) Banner 上 文字 的 方向 。 文 字 的 方向 应 尽量 调整 为 一 个 方向 ， 这 样 更 容易 被 浏览 者 从 
一 个 方向 读 到 。 

(3) Banner 上 图 片 的 位 置 。 图 片 是 视线 的 第 一 焦点 ， 浏 览 者 会 随 着 图 片 看 过 去 ， 所 以 图 
片 应 该 放 在 Banner 的 左边 ， 如 图 16-12 所 示 。 

(4) Banner 上 按钮 的 位 置 。 一 般 浏览 者 阅读 的 习惯 是 从 左 到 右 ， 所 以 将 按钮 放 在 Banner 
的 右边 比较 合适 ， 如 图 16-13 所 示 。 
LT ey 
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图 16-12 ”Banner 上 的 图 片 图 16-13 ”Banner 上 的 按钮 

(5) Banner 上 文字 的 间距 。 一 般 情 况 下 ， 文 字 越 小 ， 间 距 越 大 ， 这 样 可 以 提高 文字 的 可 
读 性 。 而 文字 越 大 ， 间 距 就 应 越 小 。 

(6) Banner 上 文字 的 数量 。 文 字数 量 尽量 不 要 太 多 ， 这 样 更 容易 被 浏览 者 看 到 。 

(7) Banner 上 的 文字 之 间 应 尽量 留 空 。 这 样 更 容易 做 出 精彩 的 动画 效果 。 

(8) Banner 的 大 小 。 网 站 Banner 被 浏览 者 观看 的 时 候 ， 需 要 下 载 Banner， 所 以 Banner 
不 宣 设置 得 太 大 。 


16.2 制作 文字 Logo 


一 个 设计 新 颖 的 网 站 Logo 可 以 给 网 站 带 来 不 错 的 宣传 效应 。 下 面 制作 一 个 时 尚 空间 感 的 
文字 Logo。 


16.2.1 案例 1 一 一 制作 背景 


制作 文字 Logo 之 前 ， 需 要 事先 制作 一 个 文件 背景 。 具 体操 作 步 又 如 下 。 
EE 打开 Photoshop CC， 选 择 【 文 件 】 一 【新 建 】 命 令 ， 打 开 【 新 建 】 对 话 框 ， 在 
【名 称 】 文 本 框 中 输入 【文字 Logo】， 将 【宽度 】 设 置 为 400 像素 ，【 高 度 】 设 置 


Jeuueg 河 到 是 0601 沼 习 诊 址 一 一 车 涨 由 计 新 琶 丑 河 到 怖 9L 省 鲁 
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为 200 像素 ，【 分 辩 率 】 设 置 为 72 像素 /英寸 ， 如 图 16-14 所 示 。 
EECOD) 单 击 【 确 定 】 按 钮 ， 新 建 一 个 空白 文档 。 如 图 16-15 所 示 。 


























新 喇 x 
NE [oo JIL we |] 
文档 类 型 :| 自 定 DD eT 

大 小 避 存 访 预 设 (S)- 
要 本 (W): | 400 保 系 引 | [ 纳 祯 家 (PD》。 | 
Rim [人 
分 判 二 (RJ; [72 依 吉 /更 寸 “| 
颜色 模式 :| RG8 颜色 “= [3 位 _s) 
痛 是 内 容 :| 和 白色 Dm 图 重大 小 : 
ee tk 
巩 色 配置 文件 : | sRGB IEC61966-2.1 
像素 长 高 比 :| 方形 像素 
16-14 【新 建 】 对 话 框 16-15 ”空白 文档 


了 TB 新 建 图 层 1， 设 置 前 景色 为 (C:39，M:53，Y:52， 
K:22)， 背 景色 为 (C:0，M:0，Y:0，K:0)， 如 图 16-16 
所 示 。 

EC 选择 工具 箱 中 的 渐变 工具 ， 在 其 工具 栏 选项 中 设 
置 过 渡 色 为 【前 景色 到 背景 色 】， 渐 变 模式 为 【线性 
渐变 】， 如 图 16-17 所 示 。 图 16-16 设置 前 景色 和 背景 色 

EEC) 按 Ctrl+A 组 合 键 进行 全 选 ， 选 择 图 层 1， 再 回 到 
图 像 窗口 ， 在 选区 中 按 住 Shift 键 的 同时 由 上 至 下 画 出 渐变 色 ， 然 后 按 Ctrl+D 组 合 
键 取消 选区 ， 如 图 16-18 所 示 。 





LGA 渍 





16-17 ”渐变 工具 图 16-18 画 出 渐变 


16.2.2 案例 2 一 一 制作 文字 内 容 


文字 Logo 的 背景 制作 完成 后 ， 下 面 就 可 以 制作 Logo 的 文字 内 容 了 。 具 体操 作 步 又 如 下 。 

TI 在 工具 箱 中 选择 横 排 文字 工具 ， 在 文档 中 输入 文字 YOU， 并 设置 文字 的 字体 格 
式 为 Times New Roman， 大 小 为 100pt， 字 体 样式 为 Bold， 颜 色 为 (C:0，M:100， 
Y:0，K:0)， 如 图 16-19 所 示 。 

EEC 在 【图 层 】 面 板 中 选中 文字 图 层 ， 然 后 将 其 拖 电 到 【新 建 图 层 】 按 钮 上 ， 复 制 
文字 图 层 ， 如 图 16-20 所 示 。 





图 16-19 输入 文字 16-20 ”复制 文字 图 层 


TBY 选中 【YOU 副本 】 图 层 ， 选 择 【 编 辑 】 一 【变换 】 一 【垂直 翻转 】 命 令 ， 翻 转 
图 层 ， 然 后 调整 图 层 的 位 置 ， 如 图 16-21 所 示 。 

EC 选中 【YOU 副本 】 图 层 ， 在 【图 层 】 面 板 中 设置 该 图 层 的 不 透明 度 为 50%， 最 
终 的 效果 如 图 16-22 所 示 。 


图 16-21 翻转 图 层 图 16-22 设置 图 层 的 不 透明 度 


ED 参照 步骤 1 到 步骤 4 的 操作 ， 输 入 并 设置 字母 了 的 显示 效果 ， 其 中 字母 本 为 白 
色 ， 如 图 16-23 所 示 。 

EEC 参照 步骤 1 到 步骤 4 的 操作 步骤 ， 输 入 并 设置 字母 IA 的 显示 效果 ， 其 中 字母 
IA 为 白色 ， 如 图 16-24 所 示 。 


人 
(3 
. 


16-23 ”设置 字母 J 的 显示 效果 16-24 设置 |A 的 显示 效果 
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16.2.3 ”案例 3 一 一 绘制 自 定义 形状 


在 一 些 Logo 中 ， 会 出 现 @ 标 识 ， 该 标识 的 含义 是 优秀 ， 也 就 是 说 明 该 公司 所 提供 的 产 
品 或 服务 是 优秀 的 。 
绘制 @@ 标 识 的 具体 操作 步骤 如 下 。 
EEC 在 工具 箱 上 选择 自 定 形状 工具 ， 再 在 首选 项 中 单 击 【 可 打开 “ 自 定 形状 ” 拾 色 
器 】 按 钮 ， 打 开 系 统 预 设 的 形状 ， 在 其 中 选择 需要 的 形状 样式 ， 如 图 16-25 所 示 。 
ECEJDy 在 【图 层 】 面 板 中 单 击 【 新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 ， 然 后 在 该 图 层 中 绘 
制 形状 ， 如 图 16-26 所 示 。 
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16-25 ”选择 需要 的 形状 样式 16-26 ”绘制 形状 


EEIRB 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 并 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 
选择 【 栅 格 化 图 层 】 命 令 ， 即 可 将 该 形状 转化 为 图 层 ， 如 图 16-27 所 示 。 

EC 选中 形状 所 在 图 层 并 复制 该 图 层 ， 然 后 选择 【编辑 】~~【 变 换 】~~【 生 直 翻转 】 
命令 ， 翻 转 形状 ， 最 后 调整 该 形状 图 层 的 位 置 与 图 层 不 透明 度 ， 如 图 16-28 所 示 。 








© 





图 16-27 栅 格 化 图 层 图 16-28 ”翻转 形状 
16.2.4 ”案例 4 一 一 美化 文字 Logo 
美化 文字 Logo 的 具体 操作 步骤 如 下 。 
EC 新 建 一 个 图 层 ， 然 后 选择 工具 箱 中 的 单列 选 框 工具 ， 选 择 图 层 中 的 单列 ， 如 图 16-29 


所 示 。 
ZY 选择 工具 箱 中 的 油漆 桶 工具 ， 填 充 单列 为 攻 红 色 (C:0，M:100，Y:0，K:0)。 然 后 


按 CtrltD 组 合 键 ， 取 消 选 区 的 选择 状态 ， 如 图 16-30 所 示 。 





16-30 ”使 用 油漆 桶 工具 


16-29 ”新 建 图 层 





ECDIS 按 Ctrl+T 组 合 键 ， 自 由 变换 绘制 的 直线 ， 并 将 其 调整 为 合适 的 位 置 ， 如 图 16-31 
所 示 。 
EC 选择 工具 箱 中 的 橡皮 擦 工具 ， 擦 除 多 余 的 直线 ， 如 图 16-32 所 示 。 





® 


图 16-31 ”变换 绘制 的 直线 16-32 ” 擦 除 多 余 的 直线 


葬 于 BY 复制 直线 所 在 图 层 ， 然 后 选择 【编辑 】 一 【变换 】 一 【 生 直 翻转 】 命 令 ， 并 调 
整 其 位 置 和 图 层 的 不 透明 度 ， 如 图 16-33 所 示 。 

EECRDp 新 建 一 个 图 层 ， 选 择 工具 箱 中 的 矩形 选 框 工具 ， 在 其 中 绘制 一 个 矩形 ， 并 填充 
和 矩形 的 颜色 为 (C:0，M:100，Y:0，K:0)， 如 图 16-34 所 示 。 


Jeuueg 沼 到 是 0601 沼 习 诊 址 一 一 车 涨 由 计 新 避 丑 河 习 二 91 洲 二 





图 16-33 ”垂直 翻转 图 层 图 16-34 ”绘制 矩形 
EEC 在 玫 红 色 和 矩形 上 输入 文字 【 友 佳 】， 并 调整 文字 的 大 小 与 格式 ， 如 图 16-35 所 示 。 
本 于 BY 双击 文字 【 友 佳 】 所 在 的 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 选 中 【投影 】 复 选 
框 ， 为 图 层 添 加 投影 样式 ， 如 图 16-36 所 示 。 





16-35 输入 文字 16-36 ”投影 样式 效果 


国 于 BY 选中 秆 形 与 文字 【 友 佳 】 所 在 图 层 ， 然 后 单 击 鼠 标 右 键 ， 在 弹出 的 快捷 菜单 中 
选择 【合并 图 层 】 命 令 , 合并 选中 的 图 层 ， 如 图 16-37 所 示 。 
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EC 选中 合并 之 后 的 图 层 ， 将 其 拖 忠 到 【新 建 图 层 】 按 钮 之 上 ， 复 制图 层 。 然 后 选 
择 【 编 辑 】 一 【变换 】 一 【垂直 翻转 】 命 令 ， 翻 转 图 层 ， 最 后 调整 图 层 的 位 置 与 该 


图 层 的 不 透明 度 ， 最 终 的 效果 如 图 16-38 所 示 。 

















图 16-37 合并 图 层 16-38 ”翻转 图 层 


16.3 制作 图 案 Logo 
下 面 介绍 如 何 制 作 图 案 型 Logo。 


16.3.1 案例 5 一 一 制作 背景 


制作 带 有 图 案 的 Logo 时 ， 首 先 需 要 做 的 就 是 制作 Logo 背景 。 有 具体 操作 步骤 如 下 。 

EDP 打开 Photoshop CC， 选 择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建 】 对 话 框 ， 在 
【名 称 】 文 本 框 中 输入 【图 案 Logo】， 将 【宽度 】 设 置 为 400 像素 ，【 高 度 】 设 置 
为 200 像素 ，【 分 辨 率 】 设 置 为 72 像素 /英寸 ， 如 图 16-39 所 示 。 

E57 单 击 工具 箱 中 的 【渐变 工具 】 按 钮 之 后 ， 双 击 选 项 栏 中 的 编辑 渐变 按钮 ， 即 可 
打开 【渐变 编辑 器 】 对 话 框 ， 在 其 中 设置 最 左边 色 标 的 RGB 值 为 (47.176.224)， 最 
右边 色 标的 RGB 值 为 (255,255,255)， 如 图 16-40 所 示 。 




















泊 记 六 癌 器 口 x 
祯 说 要 ET 
取消 
存 和 (5),， 
名 物 (N): 上 昕 定 ] [ 亲 建 wm) ] 
琳 家 赤 直 | 闵 床 = 


手 届 大 MF [100] - | % 


T 泛 台 订 | -|% 位 加 [|]% [出 陈 D) 


me: ?| a0:[ |% [ mo) | 














图 16-39 新建 空白 文件 图 16-40 【渐变 编辑 器 】 对 话 框 





了 Up 设置 完毕 后 单 击 【 确 定 】 按 钮 ， 对 选区 从 上 到 下 绘制 渐变 ， 如 图 16-41 所 示 。 
了 7 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建 】 对 话 框 ， 在 其 中 设置 【宽度 】 为 
400 像素 ， 














【高 度 】 为 10 像素 ， 【分辨 率 】 为 72 像素 /英寸 【颜色 模式 】 为 
【RGB 颜色 】，【 背 景 内 容 】 为 【透明 】， 如 图 16-42 所 示 。 
新 全 x 
名 和 IN): | 未 标量 [3 ] 
文 入 类 到 | 自 定 ]i ( 取消 ] 
好 避 [Mm | 
更 BCwj:[o | [全 表  :] 出 际 预 如 
丙 贰 四: [10 [ 语 
天 可: [72 [二 
颜色 模式 : [R53 新 外 =] [sf 位 
背景 内 容 :| 运 明 .| 图 入 大 小 : 
a 和 
英名 要 间 文 件 :| 工作 :spCB IEC519- | 
像素 区 比 :| 方形 外 ] 











图 16-41 绘制 渐变 图 16-42 【新 建 】 对 话 框 
SS 在 【图 层 】 面 板 上 单 击 【新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 栏 上 
的 【和 矩形 选 框 工具 】 按 钮 ， 并 在 矩形 选项 栏 中 设置 【样式 】 为 【固定 大 小 】，【 宽 
度 】 为 400 像素 ，【 高 度 】 为 5 像素 ， 在 视图 中 绘制 一 个 矩形 ， 如 图 16-43 所 示 。 





单 击 工具 栏 中 的 【前 景色 】 图 标 ， 在 弹出 的 【 拾 色 器 】 对 话 框 中 ， 将 RGB 值 设 
为 选区 填充 颜色 ， 如 图 16-44 所 示 。 


为 (148,148,155)， 然 后 使 用 油漆 桶 工具 ， 


一 


= 上 





16-43 ”绘制 矩形 图 16-44 ”为 选区 填充 颜色 


ET 选择 【编辑 】 一 【定义 图 案 】 命 令 ， 打 开 【 图 案 名 称 】 对 话 框 。 在 【名 称 】 文 
本 框 中 输入 图 案 的 名 称 即 可 ， 如 图 16-45 所 示 。 

EECB 然后 返回 到 图 案 Logo 视图 中 ， 选 中 上 面 实行 渐变 的 矩形 选区 ， 在 【图 层 】 面 板 
上 单 击 【 创 建新 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 选 择 【 编 辑 】 一 【填充 】 命 令 ， 
即 可 打开 【填充 】 对 话 框 ， 设 置 【内 容 】 为 【图 案 】，【 自 定 图 案 】 为 上 面 定 义 的 

图 案 ，【 模式 】 为 【正常 】， 如 图 16-46 所 示 。 

了 op 设置 完毕 后 单 击 【 确 定 】 按 钮 ， 即 可 为 选 定 的 区 域 填 充 图 像 ， 然 后 在 【图 层 】 

面板 中 可 以 通过 调整 其 不 透明 度 来 设置 填充 图 像 显示 的 效果 ， 在 这 里 设置 图 层 不 透 

明度 为 47%， 如 图 16-47 所 示 。 

Ey 在 【图 层 】 面 板 中 双击 新 建 的 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 【样式 】 中 
选择 【内 发 光 】 样 式 选项 之 后 ， 设 置 【混合 模式 】 为 【正常 】， 发 光 颜 色 RGB 值 为 
(255,255,190)，【 大 小 】 为 5 像素 。 在 设置 完毕 之 后 ， 单 击 【 确 定 】 按 钮 ， 即 可 完成 
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对 内 发 光 的 设置 ， 效 果 如 图 16-48 所 示 。 
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16-46 【填充 】 对 话 框 


图 16-45 【图 案 名 称 】 对 话 框 











图 16-47 设置 图 层 不 透明 度 16-48 ”内 发 光 效 果 


16.3.2 ”案例 6 一 一 制作 图 案 效 果 


背景 制作 完毕 后 ， 下 面 就 可 以 制作 图 案 效果 了 。 有 具体 操作 步骤 如 下 。 
EC 在 【图 层 】 面 板 上 单 击 【创建 新 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 
中 的 【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 图 层 中 创建 一 个 圆 形 选区 ， 如 图 16-49 


所 示 。 
使 用 油漆 桶 工具 为 选区 填充 颜色 ， 其 RGB 值 设 为 (120,156,115)， 如 图 16-50 所 示 。 











图 16-50 填充 颜色 


16-49 创建 圆 形 选区 

EEC 在 【图 层 】 面 板 中 双击 新 建 的 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 【样式 】 中 

选择 【外 发 光 】 样 式 选项 之 后 ， 设 置 【 混 合 模式 】 为 【 滤 色 】， 发 光 颜色 RGB 值 为 
(240,243,144)，【 大小】 为 7 像素 ， 如 图 16-51 所 示 。 





EC 设置 完毕 后 单 击 【确定 】 按 钮 ， 即 可 完成 外 发 光 的 设置 ， 效 果 如 图 16-52 所 示 。 


本 
| ET 















16-51 设置 外 发 光 16-52 ”外 发 光 效果 





EECJDp 在 【图 层 】 面 板 上 单 击 【 创 建新 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 
中 的 【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 上 面 创建 的 圆 形 中 再 创建 一 个 圆 形 选 
区 ， 如 图 16-53 所 示 。 

区 TY 使 用 油漆 桶 工具 心 .， 为 选区 填充 颜色 ， 其 RGB 值 设 为 (255,255,255)， 如 图 16-54 
所 示 。 


Jeuueg 当 到 是 0601 昼 习 从 坦 一 一 洁 浅 灯 计 并 下 隔 凡 司 ， 几 91 省 二 





和 AAS 





图 16-53 创建 圆 形 选区 图 16-54 ”填充 选区 为 白色 


EC 在 【图 层 】 面 板 上 单 击 【创建 新 图 层 】 按 钮 ， 新 建 一 个 图 层 ， 然 后 单 击 工具 箱 
中 的 【 自 定 义 形状 工具 】 按 钮 ， 在 选项 工具 栏 中 ， 单 击 形 状 下 拉 按 钮 ， 在 弹出 的 下 
拉 列 表 中 选择 红 桃 种， 如 图 16-55 所 示 。 

EECSRUB 选择 完毕 后 在 视图 中 绘制 一 个 心 形 图 案 ， 在 【路 径 】 面 板 上 单 击 【将 路 径 作 为 
选区 载 入 】 按 钮 ， 即 可 将 红 桃 形 图 案 的 路 径 转化 为 选区 ， 如 图 16-56 所 示 。 








1 


口 业 闪 合 口 赐 归 
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WA 2*) [oy YAW 


16-55 ”选择 自 定义 形状 16-56 ”绘制 心 形 选区 
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ECIRDp 单 击 【 前 景色 】 图 标 ， 打 开 【 拾 取 实 色 】 对 话 框 ， 在 其 中 将 RGB 值 设 为 
(224,65,65)。 使 用 油漆 桶 工具 为 选区 填充 颜色 ， 然 后 使 用 移动 工具 调整 其 位 置 ， 完 成 
后 具体 的 显示 效果 如 图 16-57 所 示 。 

EC 在 【图 层 】 面 板 上 单 击 【创建 新 图 层 】 按 钮 ， 新 建 一 个 图 层 ， 单 击 工具 栏 中 的 
【 横 排 文字 工具 】 按 钮 ， 在 视图 中 输入 文本 LOVE 之 后 ， 再 在 【字符 】 面 板 中 设置 
字体 大 小 为 20 点 ， 字 体 样 式 为 【宋体 】， 颜 色 为 白色 ， 如 图 16-58 所 示 。 








16-57 ”填充 选区 为 红色 16-58 ”输入 文字 


16.4 制作 英文 Banner 
在 网 站 中 ，Banner 的 位 置 显著 ， 色 彩 艳 丽 ， 动 态 的 情况 较 多 ， 很 容易 吸引 浏览 者 的 目 





光 。 因 此 ，Banner 作为 一 种 页 面 元 素 ， 它 必须 服从 整体 页 面 的 风格 和 设计 原则 。 下 面 制作 一 
个 英文 Banner。 
16.4.1 案例 7 一 一 制作 Banner 背 和 

制作 Banner 背景 的 具体 操作 步骤 如 下 。 


EEC 打开 Photoshop， 按 CtrltN 组 合 键 ， 新 建 一 个 宽 为 468px、 高 为 60px 的 文件 ， 
将 它 命名 为 【英文 Banner】， 如 图 16-59 所 示 。 
ED 单 击 【确定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 16-60 所 示 。 
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间 要 吉 | R68 本 名:] .8 位 
背景 内 容 : | 白色 图 灸 大小: 


闫 名 本 委 文 伟 | 工作 让 的 RGB: 3R6B JEC519 = 
入 过 长 次 比 : | 方 和 你 素 











16-59 【新 建 】 对 话 框 


图 16-60 空白 文档 
EEJes 新 建 一 个 图 层 1， 设 置 前 景色 为 (C:5，M:20，Y:95，K:0)， 背 景色 为 (C:36， 
M:66，Y:100，K20)， 如 图 16-61 所 示 。 
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EEC 选择 工具 箱 中 的 渐变 工具 ， 在 其 工具 栏 选项 中 设置 过 渡 色 为 【前 景色 到 背景 
色 】， 渐 变 模式 为 【线性 渐变 】， 如 图 16-62 所 示 。 

ED 按 Ctl+A 组 合 键 进行 全 选 ， 选 择 图 层 1， 再 回 到 图 像 窗口 ， 在 选区 中 按 住 Shift 
键 的 同时 由 上 至 下 画 出 渐变 色 ， 然 后 按 Ctrl+D 组 合 键 取消 选区 ， 如 图 16-63 所 示 。 





图 16-61 设置 前 景色 和 背景 色 图 16-62 设置 渐变 图 16-63 ”绘制 渐变 


16.4.2 ”案例 8 一 一 制作 Banner 底 纹 


制作 Banner 背景 底 纹 的 具体 操作 步骤 如 下 。 

EEC) 在 工具 箱 中 选中 画笔 工具 ， 单 击 【 形 状 】 右 侧 的 下 三 角 按钮 ， 在 弹出 的 下 拉 列 
表 中 选择 图案， 并 设置 【大 小 】 为 100 像素 ， 流 量 为 50%， 如 图 16-64 所 示 。 

EE 了 ZY 使 用 画笔 工具 在 图 片 中 画 出 如 图 16-65 所 示 的 图 形 。 

EB 选择 自 定形 状 工具 ， 在 上 方 出 现 的 工具 栏 选项 中 选择 自己 喜欢 的 形状 ， 在 这 里 
选择 了 和 ,形状 ， 如 图 16-66 所 示 。 

EC 新 建 路 径 1， 绘 制 大 小 合适 的 形状 ， 再 右 击 路 径 1， 在 弹出 的 快捷 菜单 中 选择 
【建立 选区 】 命 令 ， 如 图 16-67 所 示 。 


Jeuueg 河 到 T0601 刚 习 褒 坦 一 一 洛 浅 灯 计 新 否 丑 喇 习 几 9 没 下 








图 16-65 ”绘制 图 形 








16-66 ”选择 形状 图 16-67 选择 【建立 选区 】 命 令 
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ED 设置 前 景色 为 (C:10，M:16，Y:75，K:0)， 新 建 图 层 2， 然 后 填充 形状 ， 如 图 16-68 
所 示 。 


[ 3 一 


1 二 
16-68 ”填充 形状 


ED 双击 图 层 2， 打 开 【 图 层 样式 】 对 话 框 ， 为 图 层 2 添加 投影 样式 ， 具 体 的 参数 设 
置 如 图 16-69 所 示 。 


为 图 层 2 添加 描 边 图 层 样 式 ， 具 体 的 参数 设置 如 图 16-70 所 示 。 
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=s: EE 
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梁 鲁 (N): CF 0 和 
国人) 
[RE 全] (Ker RW 本 CC 
图 16-69 设置 投影 图 16-70 设置 描 边 


ECEDRB9 选择 自 定义 形状 工具 ， 为 图 片 添 加 形状 ， 并 填充 为 绿色 ， 具 体 的 效果 如 图 16-71 


所 示 。 
ta 


图 16-71 填充 形状 
16.4.3 ”案例 9 一 一 制作 文字 特效 
制作 文字 特效 的 具体 操作 步骤 如 下 。 


EEJDp 选择 工具 箱 中 的 横 排 文字 工具 ， 为 Banner 添加 英文 文字 ， 然 后 设置 文字 的 大 
小 、 颜 色 、 字 体 等 属性 ， 并 为 文字 图 层 添 加 投影 效果 ， 如 图 16-72 所 示 。 


| ernaveaarean 
{ 昌 ， to become a musician 


图 16-72 添加 文字 


EECDy 选择 【编辑 】 一 【变换 】 一 【和 斜 切 】 命 令 ， 调 整 文字 的 角度 ， 最 终 完成 的 效果 如 
图 16-73 所 示 。 
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Jeuueg 潭 到 T0601 潭 到 币 盖 一 营 湾 由 计 妆 避 卫 济 到 者 91 小 


Ee 


Sen" 
?8 to becomea musician 


图 16-73 设置 角度 


16.5 ”制作 中 文 Banner 
上 一 节 介 绍 了 如 何 制 作 英文 Banner， 这 一 节 介 绍 如 何 制作 中 文 Banner。 


16.5.1 案例 10 一 一 输入 特效 文字 


输入 特效 文字 的 具体 操作 步骤 如 下 。 

ECXDp 打开 Photoshop CC， 选 择 【 文 件 】 一 【新 建 】 命 令 ， 弹 出 【新 建 】 对 话 框 ， 输 
入 相关 配置 ， 创 建 一 个 600 像素 x300 像素 的 空白 文档 ， 单 击 【 确 定 】 按 钮 ， 如 
图 16-74 所 示 。 

四 ZY 使 用 工具 栏 中 的 横 排 文字 工具 在 文档 中 插入 要 制作 立体 效果 的 文字 内 容 ， 文 字 
颜色 和 字体 可 自行 定义 ， 本 实例 采用 黑色 ， 如 图 16-75 所 示 。 
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图 16-74 【新 建 】 对 话 框 图 16-75 ”添加 文字 


EC) 右 击 文字 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【 栅 格 化 文字 】 命 令 ， 将 矢量 文字 变 
成 像素 图 像 ， 如 图 16-76 所 示 。 

EC 选择 【编辑 】 一 【自由 变换 】 命 令 ， 对 文字 执行 变形 操作 ， 调 整 到 合适 的 角 
度 ， 如 图 16-77 所 示 。 





16-76“ 栅 格 化 文字 16-77 ”对 文字 执行 变形 
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Sn 文字 自由 变形 时 需要 注意 透视 原理 。 
至 


16.5.2 ”案例 11 一 一 将 输入 的 文字 设置 为 3D 效果 


将 输入 的 文字 设置 为 3D 效果 的 具体 操作 步骤 如 下 。 

TRY 对 文字 图 层 复制 ， 生 成 文字 副本 图 层 ， 如 图 16-78 所 示 。 

ED) 选择 副本 图 层 ， 双 击 图 层 ， 弹 出 【图 层 样 式 】 对 话 框 ， 选 中 【斜面 和 浮雕 】 复 
选 框 ， 调 整 【 深 度 】 为 350%，【 大 小 】 为 7 像素 ， 如 图 16-79 所 示 。 选 中 【颜色 三 
加 】 复 选 框 ， 设 置 基 加 颜色 为 红色 ， 单 击 【 确 定 】 按 钮 。 
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16-78 ”复制 图 层 16-79 【图 层 样式 】 对 话 框 


EEJep 新 建 图 层 1， 把 图 层 1 拖 电 到 文字 副本 图 层 下 面 ， 如 图 16-80 所 示 。 
EEC》 右 击 文字 副本 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【向 下 合并 】 命 令 ， 将 文字 副本 
图 层 合并 到 图 层 1 上 得 到 新 的 图 层 ， 如 图 16-81 所 示 。 





图 16-80 新建 图 层 图 16-81 合并 图 层 
EEJD) 选择 图 层 1， 按 Ctrl+Alt+T 组 合 键 执行 复制 变形 ， 在 属性 栏 中 输入 纵横 拉 伸 的 百 
分 比例 分 别 为 101%， 然 后 使 用 小 键盘 方向 键 ， 向 右 移动 两 个 像素 ( 单 击 一 次 方向 键 


可 移动 1 个 像素 )， 如 图 16-82 所 示 。 
EC) 按 Ctrl+Alt+Shift+T 组 合 键 复制 图 层 1， 并 使 用 方向 键 向 右 移动 一 个 像素 ， 使 用 
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相同 方法 依次 复制 图 层 ， 并 向 右 移动 一 个 像素 ， 经 过 多 次 重复 操作 ， 如 图 16-83 
所 示 。 





山中 Qu 


图 16-82 ” 拉 伸 文字 16-83 ”复制 图 层 


ES 合并 除了 背景 图 层 和 原始 文字 图 层 外 的 其 他 所 有 图 层 ， 并 将 合并 后 的 图 层 拖 放 
到 文字 图 层 下 方 ， 如 图 16-84 所 示 。 

EEC) 选择 文字 图 层 ， 使 用 Ctrlt+T 组 合 键 对 图 形 执行 拉 伸 变形 操作 ， 使 其 刚好 能 盖 住 
制作 立体 效果 的 表面 ， 按 Enter 键 使 其 生效 ， 如 图 16-85 所 示 。 





Jeuueg 河 到 T0601 汝 到 这 划一 一 藻 满 炸 训 部 避 卫 潮 到 几 9 波 下 





图 16-84 ”合并 图 层 图 16-85 拉 伸 文字 图 层 
EEJRD) 双击 文字 图 层 ， 弹 出 【图 层 样 式 】 对 话 框 ， 选 中 【渐变 个 加 】 复 选 框 ， 设 置 渐 
变样 式 为 “橙黄 , 橙 渐变 ”， 单 击 【确定 】 按 钮 ， 如 图 16-86 所 示 。 
EC 立体 文字 效果 制作 完成 ， 如 图 16-87 所 示 。 
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16-86 ”设置 渐变 全 加 16-87 立体 文字 效果 
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16.5.3 ”案例 12 一 一 制作 Banner 背景 





ET 按 CtrltN 组 合 键 ， 新 建 一 个 宽 为 468 像素 、 高 为 60 像素 的 文件 ， 将 它 命 名 为 
【中 文 Banner】， 如 图 16-88 所 示 。 
ED 单 击 【确定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 16-89 所 示 。 
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16-88 【新 建 】 对 话 框 图 16-89 空白 文档 


TE> 选择 工具 箱 中 的 渐变 工具 ， 并 设置 渐变 颜色 为 紫色 (R:102，G:102，B:155) 到 橙 
色 (R:230，G:230，B:255) 的 渐变 ， 如 图 16-90 所 示 。 

HYYP 按 住 Ctl 键 ， 单 击 【 背 景 】 图 层 ， 全 选 背 景 ， 然 后 在 选 框 上 方 单 击 并 向 下 拖 忠 鼠 
标 ， 填 充 从 上 到 下 的 渐变 ， 然 后 按 Ctrl+D 组 合 键 取 消 选 区 ， 如 图 16-91 所 示 。 





16-90 设置 渐变 16-91 填充 渐变 


ED 打开 上 一 步 制 作 的 特效 文字 ， 使 用 移动 工具 将 该 文字 拖 电 到 企业 网 站 Banner 文 
件 中 ， 然 后 按 CtrlHT 组 合 键 ， 调 整 文字 的 大 小 与 位 置 ， 如 图 16-92 所 示 。 

ED 选择 画笔 工具 ， 然 后 在 【画笔 预 设 】 面 板 中 选择 星星 图 案 ， 并 设置 图 案 的 大 小 
等 ， 如 图 16-93 所 示 。 





DD oh 


图 16-92 添加 文字 文件 图 16-93 【画笔 预 设 】 面 板 
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EGG 在 企业 网 站 Banner 文档 中 绘制 枫叶 图 案 ， 最 终 的 效果 如 图 16-94 所 示 。 至 此 ， 
就 完成 了 网 站 中 文 Banner 的 制作 。 





16.6 
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16-94 ”网 站 中 文 Banner 


综合 案例 1 一 一 制作 图 文 结合 Logo 


大 部 分 网 页 的 Logo 都 是 图 文 结 合 的 Logo。 下 面 制作 一 个 图 文 结合 的 Logo。 


1. 制作 Logo 中 的 图 案 
具体 操作 步骤 如 下 。 


EC 在 Photoshop CC 的 主 窗口 中 ， 选 择 【 文 件 】 一 【新 建 】 命 令 ， 打 开 【 新 建 】 对 


话 框 ， 在 其 中 设置 【宽度 】 为 200 像素 ， 
素 /英寸 【颜色 模式 】 为 【RGB 颜色 】， 


所 示 。 


【高 度 】 为 100 像素 ， 
【背景 内 容 】 为 【白色 】， 如 图 16-95 


【分 辨 率 】 为 72 像 


EEC 选择 【视图 】 一 【显示 】 一 【网 格 】 命 令 ， 在 图 像 窗口 中 显示 出 网 格 。 然 后 选 
择 【 编 辑 】 一 【首选 项 】 一 【参考 线 、 网 格 和 切片 】 命 令 ， 打 开 【 首 选项 】 对 话 


框 ， 在 其 中 将 【网 格 线 间 隔 】 设 置 为 10 毫米 ， 如 图 16-96 所 示 。 























杆 sa 
Es: 了 or HE 
志 秆 (MN): 由 SLooo ] 本 让 IT bE 
六 介 上 三 [二 J [| rr 
x [ [AR | mes [HM 
RW) [200 Ea 可 MR ve 
高 员 (H): [100 E53 引 asen pn: [ee 
r= 3 Pe ne 
分 基 Ri: [这 伯 守 虽 二 “= my, (1 
[RE “| [5 位 和 Pet 
rp a 
背景 内 容 :| 自 色 Dm| 图 多大 小 : a 
a Sx 
基本 和 文件 「 工作 Rs- hon ectts 
像素 芭比 :| 万代 各 3 
16-95 【新 建 】 对 话 框 16-96 【首选 项 】 对 话 框 


攻 了 BY 设置 完毕 后 单 击 【确定 】 按 钮 ， 此 时 图 像 窗口 显示 的 网 格 属性 如 图 16-97 所 示 。 
EC 在 【图 层 】 面 板 上 单 击 【创建 新 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 
中 的 【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 图 层 中 创建 一 个 圆 形 选区 ， 如 图 16-98 


所 示 。 





ECG 选择 工具 箱 中 的 多 边 形 套 索 工 具 ， 并 同时 按 住 Alt 键 减少 部 分 的 选区 ， 完 成 后 的 
效果 如 图 16-99 所 示 。 
EC 设置 前 景色 的 颜色 为 绿色 ， 其 RGB 颜色 为 (27,124,30)。 然 后 选择 油漆 桶 工具 ， 
使 用 前 景色 进行 填充 ， 如 图 16-100 所 示 。 
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16-99 ”减少 部 分 选区 16-100 ”填充 选区 为 绿色 


EEC 在 【图 层 】 面 板 上 单 击 【 创 建新 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 
中 的 【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 图 层 中 创建 一 个 圆 形 选区 ， 如 图 16-101 
所 示 。 

EC) 设置 前 景色 的 颜色 为 红色 ， 其 RGB 颜色 为 (255,0,0)。 然 后 选择 填充 工具 ， 使 用 
前 景色 进行 填充 ， 如 图 16-102 所 示 。 























16-101 ”绘制 正 圆 16-102 ”填充 选区 为 红色 


EESRD 采用 同样 的 办 法 依次 创建 两 个 新 的 图 层 ， 并 在 每 个 图 层 上 创建 一 个 大 小 不 同 的 
红色 选区 ， 使 用 移动 工具 调整 其 位 置 ， 完 成 后 的 效果 如 图 16-103 所 示 。 








16-103 最终 显示 效果 
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2. 制作 Logo 中 的 文字 


具体 操作 步骤 如 下 。 

EC 新 建 一 个 图 层 ， 然 后 单 击 工具 栏 中 的 【 横 排 文字 工具 】 按 钮 ， 单 击 工具 选项 栏 
中 的 【文字 变形 】 按 钮 ， 打 开 【 变 形 文字 】 对 话 框 。 在 【样式 】 下 拉 列 表 框 中 选择 
【波浪 】 选 项 ， 设 置 完毕 后 单 击 【确定 】 按 钮 ， 如 图 16-104 所 示 。 

EC 选择 【窗口 】 一 【段落 】 命 令 ， 打开 【段落 】 面 板 ， 然 后 切换 到 【字符 】 面 
板 。 在 【字符 】 面 板 中 设置 要 输入 文字 的 各 个 属性 ， 如 图 16-105 所 示 。 





于 文字 x 
样式 (5): [ 国 波浪 PT 
加 水 平 (H) 口 要 直 (V) [取消 ] 

癌 曲 (8): +50 ]% 

















水 平 扭曲 (9): 0 % 


一 一 一 
重 直 扭曲 (E); 0 |% 











图 16-104 【变形 文字 】 对 话 框 图 16-105 【字符 】 面 板 


EB 设置 完毕 后 在 图 像 中 输入 文字 【创新 科技 】， 并 适当 调整 其 位 置 ， 如 图 16-106 
所 示 。 

EEC 在 【图 层 】 面 板 中 双击 文字 图 层 的 图 标 ， 打 开 【 图 层 样式 】 对 话 框 ， 并 在 【 样 
式 】 中 选中 【斜面 和 浮雕】 复 选 框 。 设 置 【样式 】 为 【外 斜面 】， 并 设置 【阴影 模 
式 】 颜 色 的 RGB 值 为 (253,184,114)， 如 图 16-107 所 示 。 


x 
E33 
本 商 
EELEI 
EL 

















图 16-106 输入 文字 图 16-107 设置 斜面 和 浮雕 
ETB 设置 完毕 单 击 【确定 】 按 钮 ， 效 果 如 图 16-108 所 示 。 
EEJDp 新 建 一 个 图 层 ， 然 后 单 击 工 具 栏 上 的 【 横 排 文字 工具 】 按 钮 ， 并 在 工具 选项 栏 
中 设置 文字 的 大 小 、 字 体 和 颜色 ， 然 后 输入 字母 Cx， 如 图 16-109 所 示 。 
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16-108 ”添加 图 层 样式 后 的 效果 16-109 ”输入 字母 


EEITD 右 击 新 建 的 文字 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【 栅 格 化 文字 】 命 令 ， 将 文字 
图 层 转化 为 普通 图 层 ， 然 后 按 Ctrl+T 组 合 键 对 文字 进行 变形 和 旋转 ， 完 成 后 的 效果 
如 图 16-110 所 示 。 

EEB 采用 同样 的 方法 完成 网 址 其 他 部 分 的 制作 ， 最 终 效果 如 图 16-111 所 示 。 














图 16-110 ” 栅 格 化 文字 图 16-111 制作 网 址 其 他 部 分 


EERD 选择 【视图 】 一 【显示 】 一 【网 格 】 命 令 ， 在 图 像 窗口 中 取消 网 格 的 显示 。 至 
此 ， 就 完成 了 图 文 结合 网 站 Logo 的 制作 ， 效 果 如 图 16-112 所 示 。 





16-112 最终 的 Logo 显示 效果 


16.7 ”综合 案例 2 一 一 制作 图 文 结合 Banner 


图 文 结合 Banner 是 网 页 中 应 用 非常 广泛 的 一 种 形式 。 下 面 制作 一 个 简单 的 图 文 结合 
Banner。 具 体操 作 步 又 如 下 。 
ED 启动 Photoshop CC， 打 开 “ 素 材 ch16\Bannerjpg” 文 件 ， 如 图 16-113 所 示 。 
EEC) 单 击 工 具 箱 中 的 横 排 文 字 工 具 ， 输 入 文字 【大 牌 闪 购 】， 并 设置 文字 的 颜色 为 
政 红色， 如 图 16-114 所 示 。 


全 300 





图 16-113 素材 文件 图 16-114 输入 文字 
TB 选择 文字 所 在 图 层 ， 按 Cal+T 组 合 键 ， 对 文字 进行 自由 变换 ， 如 图 16-115 所 示 。 
EC 选择 文字 ， 单 击 选 项 栏 中 的 【变形 文字 】 按 钮 ， 打 开 【 变 形 文字 】 对 话 框 ， 在 

其 中 设置 变形 文字 的 样式 为 【波浪 】， 并 设置 其 他 相关 参数 ， 如 图 16-116 所 示 。 























变形 文字 x 
样式 5): [ 国 波江 4] [CJ] 
回 水 平 H) 。 口 重 直 (WV) [am ] 
查 曲 (8): [zz |% 
水 平 扭曲 (O): 本 % 
委 直 扭曲 (): % 
图 16-115 自由 变换 文字 大 小 图 16-116 【变形 文字 】 对 话 框 


四 TY 单 击 【 确 定 】 按 钮 ， 即 可 完成 文字 的 变形 ， 如 图 16-117 所 示 。 
ED 双击 文字 所 在 图 层 ， 打 开 【 图 层 样 式 】 对 话 框 ， 为 文字 添加 投影 样式 ， 具 体 的 
参数 如 图 16-118 所 示 。 


a 
EE 
洪 检 式 : [ 正片 到 导 -yl 
不对 度 (0j; T % % 





前 医 Aj: 一 ] 本 度 [7 全 用 全 局 光 (G) 
人 
ER 一 [ 口 jx 














好 全 "本 EL 
EE 
:| A witty) 
四 oh 二 9 % 
TI) 
人 再 为 对 WU 值 屋 位 为 时 VW 值 
16-117 ”变形 文字 效果 图 16-118 设置 投影 参数 


EEC 双击 文字 所 在 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 为 文字 添加 描 边 样式 ， 有 具体 的 
参数 如 图 16-119 所 示 。 
EECRD) 设置 完毕 后 ， 单 击 【 确 定 】 按 钮 ， 即 可 得 到 如 图 16-120 所 示 的 文字 效果 。 
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| 
图 16-119 设置 描 边 参数 16-120 设置 后 的 文字 效果 


EEJpy 使 用 工具 箱 中 的 横 排 文字 工具 ， 输 入 其 他 相关 文字 信息 ， 并 设置 文字 的 样式 、 
颜色 、 大 小 等 参数 ， 这 里 设置 的 文字 效果 如 图 16-121 所 示 。 

EC 打开 “素材 \'ehl6\ 女 孩 jpg 与 男孩 jpg” 文 件 ， 使 用 移动 工具 将 素材 文件 拖 电 到 
Banner 文件 之 中 ， 并 调整 素材 文件 的 大 小 与 位 置 ， 最 终 得 到 如 图 16-122 所 示 的 效 
果 。 至 此 ， 一 个 简单 的 图 文 结合 Banner 就 制作 完成 了 。 








从 了 路 闲 Wy 号 浆 网 
PN 区 9 


宝宝 服饰 清仓 志 1 区 


SH10-6H300 6H1-6H30n 


SSA 


图 16-121 输入 其 他 文字 图 16-122 添加 其 他 素材 文件 


16.8 疑难 解 惑 


疑问 1: 在 输入 段落 文本 时 ， 为 什么 不 能 完全 显示 输入 的 所 有 文本 ? 


答 : 在 输入 段落 文本 时 ， 如 果 输 入 的 文本 超出 了 段落 文本 的 显示 范围 ， 则 超出 文本 框 的 
文字 将 不 能 显示 。 这 时 可 以 拖 动 段落 文本 框 四 周 的 控制 点 ， 调 整 文本 框 的 大 小 ， 直 到 完全 显 
示 所 有 的 文字 为 止 。 


疑问 2: 在 为 图 层 添加 【 针 面 和 浮雕 】〗】 图 层 样式 时 ， 怎 样 同时 为 图 像 添加 纹理 效果 ? 


答 : 在 添加 【斜面 和 浮 驹 】 图 层 样式 时 ， 系 统 会 打开 对 应 的 【图 层 样式 】 对 话 框 ， 在 对 
话 框 左边 的 【和 斜面 和 浮雕 】 选 项 下 方 选择 【纹理 】 选 项 ， 然 后 就 可 以 在 该 对 话 框 右边 的 选项 
区 域 中 选择 所 需 的 图 案 样式 并 进行 相应 的 设置 。 
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第 17 童 
让 网 页 活灵活现 一 一 


制作 简单 网 页 
动画 元 素 


使 用 Flash 可 以 制作 网 站 动画 效果 。 常 见 的 动画 形式 为 逐 帧 动画 、 形 状 补 间 动 
画 、 补 间 动 画 、 传 统 补 间 动 画 、 引 导 动 画 、 遮 罩 动 画 等 。 本 章 主要 介绍 使 用 Flash 
制作 动画 的 相关 知识 。 
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17.1 Flash 的 基本 功能 


Flash 软件 是 制作 动画 的 常用 工具 。 使 用 Flash 中 的 诸多 功能 ， 可 以 制作 网 站 中 的 多 种 动 
画素 材 ， 如 网 站 Logo、 网 站 Banner、 网 站 动态 小 广告 等 。 


17.1.1 矢量 绘图 


利用 Flash 的 矢量 绘图 工具 ， 可 以 绘制 出 具有 丰富 表现 力 的 作品 。 在 Flash 所 提供 的 绘图 
工具 中 ， 不 仅 有 传统 的 圆 形 、 正 方形 、 直 线 等 绘制 工具 ， 而 且 还 有 专业 的 贝 塞 尔 曲线 绘制 工 
具 。 图 17-1 所 示 为 绘制 的 矢量 图 效果 。 








| dobe esh Piner 1 
Er 








图 17-1 绘制 的 矢量 图 
17.1.2 动画 设计 


动画 设计 是 Flash 中 非常 普遍 的 应 用 ， 其 基本 的 形式 是 “ 帧 到 帧 动画 ”， 这 也 是 传统 手动 
绘制 动画 主要 的 工作 方式 。 

Flash 提供 了 两 种 在 文档 中 添加 动画 的 方法 。 

(1) 补 间 动 画 技术 。 一 些 有 规律 可 循 的 运动 和 变形 ， 只 需要 制作 起 始 帧 和 终止 帧 ， 并 对 
两 帧 之 间 的 运动 规律 进行 准确 的 设置 ， 计 算 机 就 能 自动 生成 中 间 过 渡 帧 ， 如 图 17-2 所 示 。 

(2) 通过 在 时 间 轴 中 更 改 连续 帧 的 内 容 来 创建 动画 。 可 以 在 舞台 中 创作 出 移动 对 象 、 旋 
转 对 象 ， 增 大 或 减 小 对 象 大 小 ， 改 变 颜色 ， 淡 入 淡出 ， 以 及 改变 对 象形 状 等 。 图 17-3 所 
示 为 【时 间 轴 】 面 板 。 


ss 





图 17-2 补 间 动 画 技术 图 17-3 【时 间 轴 】 面板 


17.1.3 ”强大 的 编程 功能 
动作 脚本 是 Flash 的 脚本 编写 语言 ， 可 以 使 影片 具有 交互 性 。 动 作 脚本 提供 了 一 些 元 素 ， 


3 

















第 
用 于 指示 影片 要 进行 什么 操作 ;可 以 对 影片 进行 脚本 设置 ， 使 单 击 鼠 标 和 按 下 键盘 键 之 类 的 ”3 
事件 可 以 触发 这 些 脚本 。 章 
在 Flash 中 ， 可 以 通过 【动作 】 面 板 编写 脚本 。 在 标准 编辑 模式 下 使 用 该 面板 时 ， 可 以 通 。 让 
过 从 菜单 和 列表 中 选择 选项 来 创建 脚本 ; 在 专家 编辑 模式 下 使 用 该 面板 时 ， 可 以 直接 向 脚 员 
本 窗 格 中 输入 脚本 。 在 这 两 种 模式 下 ， 代 码 提 示 都 可 以 帮助 完成 动作 和 插入 属性 及 事件 。 时 
图 17-4 所 示 为 【动作 】 面 板 。 洒 
制 
作 
简 
单 
网 
页 
动 
画 
死 
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图 17-4 【动作 】 面板 


17.2 ”时 间 轴 、 帧 和 图 层 


使 用 Flash 制作 动画 的 关键 元 素 有 图 层 、 时 间 轴 和 帧 ， 动 画 的 实现 基本 上 就 是 对 这 三 大 元 素 
的 编辑 。 在 Flash CC 中 可 以 轻松 地 创建 各 种 丰富 多 彩 的 动画 效果 ， 并 且 只 需要 通过 更 改 时 间 轴 每 
一 帧 的 内 容 ， 就 可 以 在 舞台 上 制作 出 移动 对 象 、 更 改 颜色 、 旋 转 、 淡 入 淡出 或 更 改 形状 等 特效 。 


17.2.1 什么 是 图 层 


Flash 中 的 各 个 图 层 都 是 相互 独立 的 ， 拥 有 独立 的 时 间 轴 ， 包 含 独立 的 帧 ， 可 以 在 图 层 中 
绘制 和 编辑 对 象 ， 而 不 会 影响 其 他 层 上 的 对 象 。 在 Flash CC 的 主 窗口 中 ， 单 击 【 时 间 轴 】 面 
板 中 的 【新 建 图 层 】 按 钮 ， 即 可 新 建 图 层 2， 并 自动 变 为 当前 层 ， 如 图 17-5 所 示 。 








17-5 ”新 建 图 层 2 


17.2.2 ”时 间 轴 与 帧 


在 Flash CC 的 【时 间 轴 】 面板 中 ， 左 侧 为 图 层 区 ， 右 侧 就 是 时 间 轴 ， 其 主要 作用 就 是 控 
制 Flash 动画 的 播放 和 编辑 。 
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时 间 轴 用 于 组 织 和 控制 影片 内 容 在 一 定时 间 内 播放 的 层 数 和 帧 数 。 在 播放 Flash 动画 时 ， 
将 按照 制作 时 设置 的 播放 帧 频 进 行 播放 。 帧 频 在 Flash 中 用 来 衡量 动画 播放 的 速度 ， 通 常 以 每 
秒 播放 的 帧 数 为 单位 (fbps， 帧 / 秒 )。 标 准 的 运动 图 像 速度 是 24 帧 / 秒 ， 如 电视 影像 。 如 图 17-6 
所 示 为 【时 间 轴 】 面 板 。 





17-6 【时 间 轴 】 面板 


帧 是 动画 的 最 基本 单位 。 大 量 的 帧 结合 在 一 起 就 组 成 了 时 间 轴 。 播 放 动画 就 是 依次 显示 
每 一 帧 中 的 内 容 。 在 Flash 中 ， 不 同 帧 的 前 后 顺序 将 关系 到 这 些 帧 中 内 容 在 影片 播放 中 的 出 现 顺 
序 。 帧 在 Flash 中 有 着 不 同 的 分 类 ， 类 型 不 同 表现 形式 也 会 有 所 不 同 。 帧 可 以 分 为 以 下 4 类。 

1. 普通 帧 

时 间 轴 中 的 每 一 个 小 方 格 都 是 一 个 普通 帧 ， 其 内 容 与 关键 帧 的 内 容 完全 相同 。 在 动画 中 
增加 普通 帧 可 以 延长 动画 的 播放 时 间 。 普 通 帧 在 时 间 轴 上 显示 为 灰色 填充 的 小 方 格 ， 按 快捷 
键 F5 即 可 插入 普通 帧 ， 如 图 17-7 所 示 。 普 通 帧 也 称 为 过 渡 帧 ， 是 在 时 间 轴 上 显示 实例 对 
象 ， 但 不 能 对 实例 对 象 进行 编辑 操作 的 帧 。 

2. 关键 帧 

关键 帧 是 带 有 关键 内 容 的 帧 ， 主 要 用 于 定义 动画 的 变化 环节 ， 是 动画 中 呈现 关键 性 内 容 
或 变化 的 帧 。 是 以 一 个 黑色 小 圆圈 表示 ， 按 快捷 键 F6 即 可 创建 关键 帧 ， 如 图 17-8 所 示 。 





图 17-7 ”插入 普通 由 图 17-8 插入 关键 帧 
rr 创建 的 普通 帧 和 关键 帧 的 画面 相同 ， 区 别 在 于 关键 帧 能 在 其 中 对 画面 进行 修改 和 


了 提示 
站 操作。 创建 的 普通 帧 中 会 显示 前 一 关键 帧 中 的 全 部 内 容 。 普 通 帧 一 般 用 于 延续 关键 帧 
中 的 画面 ， 从 而 在 动画 中 得 到 持续 画面 的 效果 。 


3. 空白 关键 帧 
空白 关键 帧 中 没有 内 容 ， 主 要 用 于 在 画面 与 画面 之 间 形 成 间隔 。 是 以 空心 小 圆圈 表示 。 
魏 关 键 帧 是 特殊 的 关键 帧 ， 它 没有 任何 对 象 存在 ， 用 户 可 以 在 其 上 绘制 图 形 。 一 旦 在 空白 


空 
关键 帧 中 创建 内 容 ， 空 白 关 键 帧 就 会 自动 转变 为 关键 帧 。 按 快捷 键 F7 即 可 创建 空白 关键 帧 ， 
如 图 17-9 所 示 。 




















第 
一 般 新 建 图 层 的 第 1 帧 都 是 空白 关键 帧 ， 如 果 在 其 中 绘制 图 形 ， 则 变 为 关键 帧 。 同 理 ，。 人 

如 果 将 某 关 键 帧 中 的 对 象 全 部 删除 ， 则 该 关键 帧 就 会 转变 为 空白 关键 帧 。 章 
4. 动作 帧 四 

页 

动作 帧 是 指 当 Flash 动画 播放 到 该 帧 时 ， 自 动 激活 某 个 特定 动作 的 帧 。 而 动作 帧 上 通常 都 加 
有 一 个 a 标记 ， 如 图 17-10 所 示 。 省 
制 

作 

简 

单 

网 

图 17-9 插入 空白 关键 由 图 17-10 动作 帧 易 

全 

来 


17.3 制作 简单 动画 


在 Flash CC 中 可 以 创建 不 同类 型 的 Flash 动画 ， 包 括 逐 帧 动画 、 补 间 动 画 和 谈 单 动画。 
熟练 掌握 这 3 种 基本 动画 的 应 用 ， 是 制作 优秀 Flash 作品 的 基本 前 提 。 


17.3.1 案例 1 一 一 制作 帧 帧 动画 


帧 帧 动画 又 称 为 逐 帧 动画 ， 是 最 基本 的 动画 方式 ， 与 传统 动画 制作 方式 相同 。 逐 帧 动画 
通常 由 多 个 连续 关键 帧 组 成 ， 用 户 可 以 在 各 关键 帧 中 分 别 绘制 表现 对 象 连续 且 流 畅 动 作 的 图 
形 。 各 帧 中 图 形 均 相互 独立 ， 修 改 某 一 帧 中 的 图 形 并 不 会 影响 其 他 帧 中 的 图 形 内 容 。 

下 面 以 制作 跳动 的 乒乓 球 动画 为 例 ， 有 具体 介绍 逐 帧 动画 的 制作 方法 。 

ESE 了 DIY 启动 Flash CC， 然 后 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 空 

白文 档 ， 最 后 将 该 文档 保存 为 【跳动 的 乒乓 球 .fla】 文档 ， 如 图 17-11 所 示 。 

EEJPp 在 【属性 】 面 板 中 ， 将 舞台 大 小 设置 为 200 像素 x200 像素 ， 然 后 将 舞台 颜色 设 

置 为 #0066FF， 如 图 17-12 所 示 。 








图 17-11 新 建 Flash 文档 图 17-12 设置 舞台 大 小 和 颜色 
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EEJep 为 了 确定 乒乓 球 跳动 的 位 置 ， 需 要 给 舞台 建立 一 个 参照 系 。 选 择 【 视 图 】 一 

【网 格 】 一 【显示 网 格 线 】 命 令 ， 即 可 在 舞台 上 显示 出 网 格 线 ， 如 图 17-13 所 示 。 

EECDUZ 编辑 网 格 线 。 右 击 舞台 ， 从 弹出 的 快捷 菜单 中 选择 【网 格 】 一 【编辑 网 格 】 命 
令 ， 即 可 打开 【网 格 】 对 话 框 ， 然 后 在 该 对 话 框 中 将 网 格 大 小 设置 为 20 像素 x20 像 
































素 ， 如 图 17-14 所 示 。 














图 17-13 显示 网 格 线 图 17-14 【网 格 】 对 话 框 
臣 BY 单 击 【确定 】 按 钮 ， 即 可 返回 主 窗口 中 查看 设置 的 效果 ， 如 图 17-15 所 示 。 
四 TY 选取 工具 栏 中 的 椭圆 工具 ， 将 笔触 颜色 设置 为 【无 】， 填 充 颜色 设置 为 【 径 向 
渐变 】， 并 选择 一 种 渐变 颜色 ， 然 后 在 舞台 上 的 第 十 格 处 绘制 一 个 圆 (从 底部 算 起 第 
10 格 )， 如 图 17-16 所 示 。 





图 17-15 设置 网 格 大 小 后 的 效果 图 17-16 绘制 圆 


ES 选中 图 层 1 上 的 第 2 帧 ， 按 F6 键 插入 关键 帧 ， 然 后 将 乒乓 球 拖 电 到 第 1 格 ， 表 
现 乒乓 球 落地 的 情景 ， 如 图 17-17 所 示 。 

ETB 乒乓 球 落地 后 会 反弹 ， 选 中 图 层 1 上 的 第 3 帧 ， 按 快捷 键 F6 插入 关键 帧 ， 然 后 
将 乒乓 球 拖 电 到 第 8 格 ， 如 图 17-18 所 示 。 

EED 按照 上 述 操作 ， 在 第 4 帧 到 第 12 帧 处 插入 关键 帧 ， 其 中 第 2、4、6、8、10、12 
帧 乒乓 球 位 于 地 面 (底部 第 1 格 )， 第 1、3、5、7、9、11、13 帧 乒乓 球 分 别 位 于 第 
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10、8、6、4、2、1 格 ， 如 图 17-19 所 示 。 
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可 上 站 1 


图 17-17 插入 关键 帧 并 确定 图 17-18 ”插入 关键 帧 并 确定 图 17-19 完成 其 他 关键 帧 的 
乒乓 球 的 跳动 位 置 乒乓 球 的 跳动 位 置 操作 
EC 设置 播放 速度 。 双 击 【 时 间 轴 】 面 板 下 方 的 【 帧 频率 】， 使 其 处 于 编辑 状态 ， 
然后 在 文本 框 中 输入 4， 如 图 17-20 所 示 。 
EEE 按 Ctrl + Enter 组 合 键 测试 动画 ， 即 可 在 测试 窗口 预览 乒乓 球 的 跳动 效果 ， 如 
图 17-21 所 示 。 





测 蝇 | 茵 昌河 到 慢 或 稚 址 





图 17-20 ”设置 帧 频率 图 17-21 测试 动画 


17.3.2 ”案例 2 一 一 制作 补 间 动 画 

逐 帧 动画 制作 起 来 费时 费力 。 因 此 ， 在 Flash 中 制作 动画 应 用 最 多 的 还 是 补 间 动 画 。 在 
Flash CC 中 可 以 将 补 间 动 画 分 为 两 类 : 形状 补 间 动 画 和 动作 补 间 动画 。 
状 补 间 动 画 

形状 补 间 动画 是 指 通过 计算 两 个 关键 帧 中 图 形 的 形状 差别 ， 而 自动 添加 变化 过 程 的 一 种 
动画 类 型 ， 常 用 于 表现 图 形 对 象形 状 之 间 的 颜色 、 形 状 、 大 小 、 位 置 等 的 自然 过 渡 。 形 状 补 
间 动 画 使 用 的 元 素 多 为 矢量 图 形 ， 如 果 使 用 的 是 图 形 元 件 、 按 钮 或 文字 ， 则 必须 先 将 其 “ 打 
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散 ” 才 能 创建 形状 补 间 动 画 。 
制作 形状 补 间 动 画 的 具体 操作 步骤 如 下 。 
EEC 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【形状 补 间 动 画 .fla】 文档， 如 图 17-22 所 示 。 
ECEPy 选中 图 层 1 的 第 1 帧 ， 然 后 使 用 椭圆 工具 在 舞台 上 绘制 5 个 圆 形 ， 并 调整 各 个 
圆 形 之 间 的 位 置 ， 如 图 17-23 所 示 。 























17-22 新建 Flash 文档 图 17-23 ”绘制 圆 形 
EC 选中 第 50 帧 ， 按 F6 键 插入 关键 帧 ， 如 图 17-24 所 示 。 





17-24 ”在 第 50 帧 处 插入 关键 帧 


EC 选中 第 30 帧 ， 然 后 使 用 文本 工具 在 绘制 的 圆 中 输入 文字 ， 最 后 将 圆 形 删除 ， 如 

图 17-25 所 示 。 

EEJD) 依次 选中 输入 的 文字 ， 然 后 按 Ctrl + B 组 合 键 ， 即 可 将 文字 “ 打 散 ”， 如 图 17-26 
所 示 。 

















图 17-25 输入 文字 图 17-26 将 文字 “ 打 散 ” 
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第 
SS 选中 第 1 帧 到 第 50 帧 之 间 的 任意 帧 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【创建 补 ” S 
间 形 状 】 命 令 ， 即 可 创建 形状 补 间 ， 如 图 17-27 所 示 。 时 
EC 按 Cul + Enter 组 合 键 测试 影片 ， 在 测试 窗口 即 可 看 到 动画 由 图 片 渐变 成 文字 的 ”让 
Eh 和 网 
显示 效果 ， 如 图 17-28 所 示 。 二 
灵 
活 
现 
制 
作 
简 
单 
网 
页 
动 
加 
死 
素 乞 








图 17-27 创建 形状 补 间 图 17-28 ”测试 影片 
2. 动作 补 间 动 画 
动作 补 间 动 画 只 由 一 个 开始 关键 帧 和 一 个 结束 关键 帧 组 成 ， 且 在 关键 帧 上 放置 的 对 象 必 
须 为 元 件 ， 在 两 个 关键 帧 之 间 设 置 创 建 补 间 动 画 ，Flash 软件 将 自动 生成 中 间 的 动画 。 
制作 动作 补 间 动 画 的 具体 操作 步骤 如 下 。 
ECDp 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【动作 补 间 动 画 .fla】 文档， 如 图 17-29 所 示 。 


EECID) 按 Ctl + F8 组 合 键 打开 【创建 新 元 件 】 对 话 框 ， 然 后 在 该 对 话 框 中 设置 新 建 元 
件 的 名 称 和 类 型 ， 如 图 17-30 所 示 。 








17-29 ”新 建 Flash 文档 图 17-30 【创建 新 元 件 】 对 话 框 
EERSp 单 击 【 确 定 】 按 钮 ， 即 可 进入 影片 剪辑 元 件 的 编辑 模式 ， 如 图 17-31 所 示 。 


EC 选取 工具 栏 中 的 椭圆 工具 ， 设 置 笔触 颜色 为 【无 】， 填 充 颜色 为 【线性 渐 
变 】， 然 后 选择 一 种 渐变 颜色 ， 最 后 在 舞台 上 绘制 一 个 椭圆 ， 如 图 17-32 所 示 。 
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17-31 进入 影片 剪辑 元 件 编辑 模式 图 17-32 ”绘制 椭圆 


基于 BY 选择 任意 变形 工具 ， 将 椭圆 的 中 心 点 往 下 移动 ， 然 后 依次 选择 【窗口 】 一 【 变 
形 】 命 令 ， 即 可 打开 【变形 】 面 板 ， 如 图 17-33 所 示 。 

ECEDDs 选中 【旋转 】 单 选 按钮 ， 并 输入 旋转 角度 值 35， 然 后 重复 单 击 【 重 制 选区 和 变 
形 】 按 钮 图 ， 即 可 得 到 花 林 的 形状 ， 如 图 17-34 所 示 。 








图 17-33 【变形 】 面板 图 17-34 ”变形 效果 


EC 选中 图 层 1 的 第 10 帧 ， 按 F6 键 插入 关键 帧 ， 然 后 使 用 任意 变形 工具 等 比例 缩 
小 花 采 并 调整 其 位 置 ， 如 图 17-35 所 示 。 

EE 选中 第 1 帧 到 第 10 帧 的 任意 一 帧 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【创建 补 间 
动画 】 命 令 ， 然 后 在 【属性 】 面 板 中 将 【旋转 】 次 数 设 置 为 1，【 方 向】 设置 为 顺 
时 针 ， 如 图 17-36 所 示 。 





图 17-35 ”插入 关键 帧 并 调整 花 洒 17-36 创建 补 间 动 画 
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EEC) 在 图 层 1 的 第 20 帧 处 插入 关键 帧 ， 然 后 使 用 任意 变形 工具 将 花 杀 整体 调 小 ， 如 
图 17-37 所 示 。 














EY 选中 第 10 帧 到 第 20 帧 的 任意 一 帧 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【创建 
补 间 动画 】 命 令 ， 然 后 在 【属性 】 面 板 中 将 【旋转 】 次 数 设置 为 1，【 方 向 】 设 置 
为 顺 时 针 ， 如 图 17-38 所 示 。 





图 17-37 在 第 20 帧 处 插入 关键 由 图 17-38 创建 补 间 动 画 


分 别 单 击 第 1 帧 到 第 10 帧 和 第 10 帧 到 第 20 帧 中 间 的 位 置 ， 然 后 单 击 右 侧 【 属 
性 】 面 板 中 的 【色彩 效果 】 选 项 卡 ， 将 【样式 】 设 置 为 Alpha， 透 明度 调 为 50%， 
如 图 17-39 所 示 。 

四 EY 单 击 【场景 1】 按钮， 返回 到 主场 景 中 ， 然 后 将 【 库 】 面 板 中 的 花 杂 元 件 拖 到 场 
景 中 ， 并 进行 大 小 和 位 置 的 摆 放 ， 如 图 17-40 所 示 。 

于 BY 按 Ctl + Enter 组 合 键 进行 测试 ， 即 可 在 测试 窗口 预览 花 杂 的 动画 效果 ， 如 图 17-41 


所 示 。 
图 17-39 设置 样式 及 透明 度 ”图 17-40 ”将 花 采 元 件 拖 到 场景 中 图 17-41 测试 影片 


17.3.3 ”案例 3 一 一 制作 遮 罩 动画 


在 Flash CC 中 很 多 效果 丰富 的 动画 都 是 通过 遮 淖 动画 来 实现 的 。 谈 单 动画 是 通过 遮 淖 层 
创建 的 ， 由 遮 蛙 层 来 决定 被 遮 单 层 中 的 显示 内 容 ， 从 而 产生 动画 效果 。 在 遮 日 中 可 以 使 用 多 
种 动画 形式 ， 比 如 可 以 在 遮 罩 层 和 被 遮 罩 层 中 使 用 形状 补 间 动 画 、 动 作 补 间 动 画 及 引导 路 径 











绕 


滑 剖 郑 闽 喇 习 片山 2 小 
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动画 等 。 
制作 简单 遮 罩 动画 的 具体 操作 步骤 如 下 。 
EI 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【 遮 日 动画 .fla】 文档 ， 如 图 17-42 所 示 。 
EEPy 依次 选择 【文件 】 一 【导入 】 一 【导入 到 有 舞台】 命令 ， 即 可 打开 【导入 】 对 话 
框 ， 然 后 在 其 中 选择 导入 到 舞台 上 的 图 片 ， 最 后 单 击 【 打 开 】 按 钮 ， 即 可 将 图 片 导 
入 到 舞台 ， 如 图 17-43 所 示 。 








图 17-42 新建 Flash 文档 图 17-43 导入 图 片 

EEIB 选中 图 片 ， 然 后 在 【属性 】 面 板 中 ， 分 别 将 宽 和 高 设置 成 与 舞台 一 样 的 大 小 ， 
即 550x400， 如 图 17-44 所 示 。 

EC 取消 对 图 片 的 选择 ， 然 后 将 舞台 的 背景 颜色 设置 为 黑色 ， 如 图 17-45 所 示 。 





17-44 设置 图 片 的 尺 十 图 17-45 设置 舞台 的 背景 颜色 


四 TB 单 击 【 时 间 轴 】 面 板 中 的 【新 建 图 层 】 按 钮 ， 即 可 在 图 层 1 上 新 插入 一 个 图 层 
2， 然 后 使 用 椭圆 工具 在 该 图 层 绘制 一 个 椭圆 形 ， 如 图 17-46 所 示 。 

本 TB 分 别 在 图 层 1 和 图 层 2 的 第 50 帧 处 插入 普通 帧 ， 这 样 可 以 延长 动画 的 播放 时 
间 ， 如 图 17-47 所 示 。 

ES 选中 图 层 2 的 第 50 帧 ， 按 F6 键 插入 关键 帧 ， 然 后 将 椭圆 形 拖 电 到 图 片 的 右上 
角 ， 并 使 用 任意 变形 工具 将 椭圆 整体 变 大 ， 如 图 17-48 所 示 。 

ED 选中 图 层 2 的 第 1 帧 到 第 50 帧 之 间 的 任意 帧 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选 
择 【 创 建 传 统 补 间 】 命 令 ， 即 可 创建 补 间 动 画 ， 如 图 17-49 所 示 。 
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图 17-48 ”插入 关键 帧 图 17-49 创建 补 间 动 画 


EUD) 右 击 图 层 2， 从 弹出 的 快捷 菜单 中 选择 【 遮 罩 层 】 命 令 ， 即 可 完成 谈 电 动画 的 制 


作 ， 如 图 17-50 所 示 。 
看 按 Ctrl + Enter 组 合 键 进行 测试 ， 即 可 在 测试 窗口 预览 遮 单 动画 的 效果 ， 如 图 17-51 








图 17-50 创建 遮 罩 动画 图 17-51 ”测试 这 晶 动 画 


17.3.4 ”案例 4 一 一 使 用 动画 预 设 


动画 预 设 是 Flash 中 预 配置 的 补 间 动 画 ， 可 以 将 其 直接 应 用 于 舞台 上 的 对 象 (元 件 实例 或 
文本 字段 )， 以 实现 指定 的 动画 效果 ， 而 无 须 用 户 自己 设计 动画 效果 。 
应 用 动画 预 设 效果 的 具体 操作 步骤 如 下 。 
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EC 打开 “素材 \ch13\ 气 球 .fla” 文 件 ， 如 图 17-52 所 示 。 
S57 选中 场景 中 的 气球 元 件 ， 然 后 依次 选择 【窗口 】 一 【动画 预 设 】 命 令 ， 即 可 打 
开 【 动 画 预 设 】 对 话 框 ， 如 图 17-53 所 示 。 

















图 17-52 素材 文件 图 17-53 【动画 预 设 】 对 话 框 
双击 该 对 话 框 中 的 【默认 预 设 】 选 项 卡 ， 即 可 打开 Flash 中 预 配置 的 各 种 动画 效 
果 ， 从 动画 效果 列表 选择 其 中 一 种 (如 这 里 选择 【2D 放大 】 选 项 )， 如 图 17-54 所 示 。 
EY》 单 击 【 应 用 】 按 钮 ， 即 可 返回 到 主 窗口 中 ， 如 图 17-55 所 示 。 








图 17-54 选择 【2D 放大 】 选 项 图 17-55 ”应 用 预 设 动画 效果 
按 Cal + Enter 组 合 键 进行 测试 ， 即 可 在 测试 窗口 预览 2D 放大 动画 效果 ， 如 图 17-56 





17-56 ”测试 动画 
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17.4 ”综合 案例 一 一 制作 数字 倒计时 动画 


本 案例 主要 通过 在 不 同 的 关键 帧 上 设置 不 同 的 数字 ， 从 而 制作 出 倒计时 动画 的 效果 。 有 具 
体操 作 如 下 。 
EC 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【数字 倒计时 动画 fla 文档， 如 图 17-57 所 示 。 
EEIDy 按 CtrltR 组 合 键 打开 【导入 】 对 话 框 ， 在 其 中 选择 需要 导入 的 素材 图 片 ， 将 该 
图 片 导入 到 舞台 中 ， 然 后 将 图 片 和 舞台 的 大 小 都 设置 为 454 像素 x381 像素 ， 并 将 图 
片 调 整 至 舞台 的 中 央 ， 如 图 17-58 所 示 。 


滑 剖 郑 闽 局 习 放 一 册 2 小 
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图 17-57 新建 Flash 文档 图 17-58 导入 图 片 


EEJe 在 图 层 1 的 第 21 帧 处 按 F5 键 插入 帧 ， 如 图 17-59 所 示 。 

EC 将 图 层 1 锁定 ， 并 新 建 一 个 图 层 ， 选 中 新 建 图 层 的 第 1 帧 ， 然 后 选择 文本 工 
具 ， 在 其 【属性 】 面 板 中 的 【字符 】 命 令 组 内 ， 将 【系列 】 设 置 为 Lucida 
Handwriting，【 大 小 】 设 置 为 85 磅 ， 【颜色 】 设 置 为 本 F9933， 如 图 17-60 所 示 。 








图 17-59 插入 帧 图 17-60 设置 【字符 】 各 项 参数 





EECJRD 按 住 鼠标 左 键 在 舞台 上 绘制 一 个 文本 框 并 输入 数字 20， 如 图 17-61 所 示 。 
ECEDDy 使 用 文本 工具 再 在 舞台 上 绘制 一 个 文本 框 并 输入 文本 【天 】， 输 入 完成 后 ， 选 
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中 输入 的 文本 ， 在 其 【属性 】 面 板 中 将 【大 小 】 设 置 为 45， 【颜色 】 设 置 为 
00CC33， 效 果 如 图 17-62 所 示 。 





图 17-61 输入 数字 图 17-62 输入 文本 


EEC 在 图 层 2 的 第 2 帧 处 插入 关键 帧 ， 然 后 使 用 文本 工具 选中 该 帧 上 的 数字 ， 并 将 
其 修改 为 19， 如 图 17-63 所 示 。 

ET 按照 相同 的 方法 ， 在 图 层 2 的 第 3 一 20 帧 处 插入 关键 帧 ， 并 修改 对 应 帧 上 的 数 

字 ， 如 图 17-64 所 示 。 





17-63 ”插入 关键 帧 并 修改 帧 上 的 数字 17-64 ”设置 关键 帧 


ECED) 单 击 【 时 间 轴 】 面 板 底部 的 【 帧 频率 】 按 钮 ， 使 其 处 于 编辑 状态 ， 然 后 在 文本 
框 中 输入 帧 频率 1， 如 图 17-65 所 示 。 

EC) 至 此 ， 就 完成 了 数字 倒计时 动画 的 制作 ， 按 Ctrl+Enter 组 合 键 进行 测试 ， 即 可 测 
试 数字 倒计时 动画 的 播放 效果 ， 如 图 17-66 所 示 。 


Ee 


洁 部 浊 部 河 到 打击 外 涛 ， 





图 17-65 设置 帧 频率 图 17-66 ”测试 效果 





| 


17.5 疑难 解 惑 


疑问 1: 为 什么 有 的 时 候 不 能 对 图 层 进行 编辑 ? 

答 : 当 出 现 这 一 问题 时 ， 要 先 查 看 需要 进行 编辑 的 图 层 是 否 处 于 锁定 状态 ， 当 图 层 被 锁 
定时 ， 图 图 标 即 会 变 成 国 图 标 ， 说 明 不 能 对 该 图 层 进行 编辑 。 单 击 该 图 层 后 面 的 图 标 轿 ， 即 
可 解除 锁定 ， 之 后 可 根据 需要 对 该 图 层 进行 编辑 。 

疑问 2: 为 补 间 动画 的 关键 帧 添加 图 形 之 后 ， 补 间 动 画 失效 怎么 办 ? 

答 : 动作 补 间 动画 只 能 在 两 个 关键 帧 之 间 ， 为 相同 的 图 形 创建 动画 效果 。 若 在 创建 之 后 
的 动作 补 间 动画 中 再 添加 图 形 、 文 字 或 元 件 等 内 容 ， 就 会 使 两 个 关键 帧 中 的 图 形 出 现 差异 ( 即 
破坏 了 动作 补 间 动 画 的 创建 前 提 )， 所 以 已 创建 好 的 动作 补 间 动 画 会 自动 解除 ， 并 出 现 
[标志 。 用 户 可 在 创建 补 间 动画 前 ， 在 起 始 关键 帧 和 结束 关键 帧 中 绘制 
好 所 有 图 形 ， 再 创建 动画 。 


浏 计 男 起 六 习 二 或 褒 址 : 
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第 18 章 
网 页 元 素 的 动态 
交互 一 一 创建 
交互 式 动画 


在 Flash CC 中 ， 通 过 ActionScript 3.0 编程 ， 可 以 更 好 地 实现 与 用 户 的 交互 ， 
轻松 地 制作 出 华丽 的 Flash 特效 。 另 外 ， 利 用 Flash 中 的 组 件 可 以 轻松 地 在 Flash 文 
档 中 添加 简单 的 用 户 界面 元 素 ， 如 单 选 按钮 、 复 选 框 、 滚 动 窗口 等 。 本 章 主 要 介绍 
如 何 创建 交互 式 网 页 动画 素材 。 
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18.1 ActionScript 概述 


通过 ActionScript 的 脚本 编写 功能 ， 可 以 将 动作 、 运 算 符 及 对 象 等 元 素 组 织 到 脚本 中 ， 即 
使 只 是 添加 几 名 简单 的 代码 ， 也 可 丰富 整个 Flash 的 动画 效果 。 


18.1.1 ActionScript 基本 术语 


像 其 他 脚本 语言 一 样 ，ActionScript 作为 Flash 的 专用 编程 语言 也 有 其 特有 的 语法 规则 。 
在 正式 学 习 ActionScript 之 前 ， 需 要 先 对 其 基本 术语 进行 简单 介绍 。 

@ 动作 : 可 以 是 告诉 影片 停止 播放 的 单一 声明 ， 也 可 以 是 在 执行 一 个 动作 前 ， 给 条 件 
赋值 的 一 系列 声明 。 动 作 是 ActionScript 脚本 语言 的 灵魂 和 编程 的 核心 ， 用 于 控制 在 
动画 播放 过 程 中 相应 的 程序 流程 和 播放 状态 。 在 动画 中 ， 所 有 ActionScript 程序 最 终 
都 要 通过 一 定 的 动作 体现 出 来 ， 程 序 是 通过 动作 与 动画 发 生 直接 联系 的 。 

@ 事件: 是 指 当 影片 播放 时 发 生 的 动作 。 在 很 多 情况 下 ， 动 作 是 不 会 独立 执行 的 ， 而 
是 要 具备 一 定 的 条 件 。 简 而 言 之 ， 就 是 要 有 一 定 的 事情 对 该 动作 进行 触发 ， 才 会 执 
行 这 个 动作 ， 起 到 触发 作用 的 事情 在 ActionScript 中 称 为 事件 。 

| 因为 每 种 事件 都 代表 不 同 的 情况 发 生 ， 所 以 必须 决定 程序 代码 应 该 写 在 哪 一 个 事 

并 件 中 。 对 于 同一 个 按钮 或 影片 剪辑 而 言 ， 也 可 以 同时 指定 多 个 不 同 的 动作 。 当 

ActionScript 不 是 添加 在 帧 上 而 是 添加 在 实例 中 时 ， 请 注意 对 实例 的 选 定 。 


e 数据 类 型 :是 值 以 及 可 以 在 上 面 执 行 的 动作 的 集合 。 在 ActionScript 中 可 以 被 应 用 ， 
并 且 能 够 进行 各 种 操作 的 数据 有 多 种 类 型 。 

e。 构造 器 : 是 用 来 定义 类 的 属性 和 方法 的 函数 。 

e@ ”类 : 是 创建 用 来 定义 新 类 型 对 象 的 数据 类 型 。 一 系列 相互 之 间 有 关联 的 数据 集合 称 
为 一 个 类 ， 可 以 使 用 类 来 创建 新 的 对 象 。 如 果 要 定义 一 个 新 的 对 象 类 ， 需 要 事先 创 
建 一 个 构造 器 函数 。 

@ ”函数 : 是 可 以 向 其 传递 参数 并 能 够 返回 值 的 可 重复 使 用 的 代码 块 。 

e ”表达 式 ， 是 任何 产生 值 的 语句 片断 。 

@ ”标识 符 : 用 来 指示 变量 、 属 性 、 对 象 、 函 数 或 者 方法 的 名 称 。 这 种 名 称 遵 循 一 定 的 
命名 规则 ， 即 作为 名 字 的 第 一 个 字符 必须 是 字母 、 下 划 线 或 特殊 符号 $ 三 者 中 的 一 
种 ， 第 二 个 字符 以 后 必须 是 字母 、 数 字 、 下 划 线 或 特殊 符号 $ (如 ，$369 是 一 个 合 
法 的 标识 符 ， 而 555Goto 不 是 合法 的 标识 符 )。 

ee 实例: 属于 某 一 个 类 的 对 象 。 一 个 类 可 以 产生 很 多 个 属于 这 个 类 的 实例 ， 一 个 类 的 
每 一 个 实例 都 包含 这 个 类 的 所 有 特性 和 方法 。 

e ”实例 名 : 每 个 实例 名 都 是 唯一 的 ， 通 过 使 用 这 个 唯一 的 实例 名 可 以 在 脚本 中 瞄准 所 
需要 的 影片 剪辑 。 

ee 变量: 保存 某 一 种 数据 类 型 的 值 的 标识 符 。 变 量 可 以 被 创建 、 改 变 和 更 新 ， 它 的 存 
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18.1.2 


储 值 也 可 以 在 脚本 中 检索 。 

方法 : 分 派 给 对 象 的 函数 。 在 一 个 函数 被 指派 给 一 个 对 象 后 ， 它 便 可 以 作为 这 个 对 
象 的 一 个 方法 调用 。 

关键 字 : 是 具有 特殊 意义 的 保留 字 ， 这 些 关键 字 都 有 特别 的 意义 ， 因 此 不 可 以 作为 
标识 符 使 用 。 

对 象 : 是 属性 的 集合 。 每 一 个 对 象 都 有 自己 的 名 称 和 数值 ， 通 过 对 象 可 以 自由 访问 
某 一 个 类 型 的 信息 。 

操作 符 : 是 从 一 个 或 多 个 值 计算 出 一 个 新 值 的 术语 。 如 使 用 -( 减 号 ) 操 作 符 可 以 求 两 
个 值 的 差 。 

目标 路 径 ， 是 影片 中 影片 剪辑 实例 名 称 、 变 量 和 对 象 的 层次 性 的 地 址 。 

属性 : 定义 对 象 的 特征 。 


【动作 】 面 板 


Flash CC 版 本 只 支持 ActionScript 3.0， 对 于 之 前 版 本 的 ActionScript 2.0 已 不 再 支持 。 因 
此 ， 无 法 再 使 用 ActionScript 2.0 中 的 代码 。 并 且 ，CC 版 本 的 【动作 】 面 板 与 之 前 版 本 相 比 ， 
界面 更 加 简洁 。 

在 Adobe Flash CC 的 主 窗口 中 ， 依 次 选择 【窗口 】 一 【动作 】 命 令 ( 或 按 F9 键 )， 即 可 打 
开 【 动 作 】 面 板 ， 如 图 18-1 所 示 。 


18-1 【动作 】 面板 


脚本 窗口 用 于 添加 和 编辑 动作 脚本 。 脚 本 窗口 为 在 一 个 全 功能 编辑 器 ( 称 作 ActionScript 
编辑 器 ) 中 创建 脚本 提供 了 必要 的 工具 ， 该 编辑 器 中 包括 代码 的 语法 格式 设置 和 检查 、 代 码 提 
示 、 代 码 着 色 、 调 试 及 其 他 一 些 简 化 脚本 创建 的 功能 。 

在 脚本 窗口 的 上 方 还 包括 一 些 其 他 功能 的 按钮 。 下 面 来 具体 介绍 这 些 按钮 的 含义 。 


【插入 实例 路 径 和 名 称 】 按 钮 国 ， 单 击 该 按钮 可 打开 【插入 目标 路 径 】 对 话 框 ， 从 
中 插入 新 的 目标 路 径 ， 如 图 18-2 所 示 。 
【查找 】 按 钮 图 ， 单 击 该 按钮 可 打开 【查找 和 替换 】 界 面 ， 在 【查找 文本 )】 文 本 框 中 


输入 要 查找 的 名 称 ， 或 在 【 蔡 换 文本 】 文 本 框 中 输入 要 替换 的 内 容 ， 如 图 18-3 所 示 。 
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18-2 【插入 目标 路 径 】 对 话 框 18-3 【查找 和 蔡 换 】 界 面 
e 【代码 片段 】 按 钮 国 : 单 击 该 按钮 可 打开 【代码 片段 】 面 板 ， 如 图 18-4 所 示 。 


ee 【帮助 】 





按钮 图 : 单 击 该 按钮 可 在 下 浏览 器 中 打开 帮助 页 面 ， 并 显示 ActionScript 


脚本 的 参考 信息 ， 如 图 18-5 所 示 。 








Actionscript 快速 入 门 


Acionscnpr 及 本 覃 写 浊 训 允许 你 向 应 用 各 序 汪 加 各 休 的 交互 性 . 禄 放 
挫 制 和 数据 哇 示 。 可 以 使 用 动作 而 核 、 “ 贡 本 ”窗口 或 外 部 近 吕 在 创 
作 环 境内 洒 如 ActionScnpt 











图 18-4 【代码 片段 】 面 板 图 18-5 帮助 页 面 


18.2 ”使 用 ActionScript 制作 动画 特效 


在 【动作 】 面 板 的 【脚本 】 窗 口中 添加 相关 ActionScript 代码 可 以 制作 动画 特效 。 下 面 介 
绍 几 种 动画 特效 的 制作 。 


18.2.1 案例 


1 一 一 制作 按钮 切换 图 片 效果 


本 案例 主要 是 通过 按钮 元 件 和 ActionScript 代码 来 完成 制作 。 制 作 按钮 切换 图 片 效 果 的 具 


体操 作 步 骤 如 下 。 


EC 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【按钮 切换 图 片 效 果 .fla】 文 档 ， 如 图 18-6 


所 示 。 


EEJP9 选中 图 层 1 的 第 1 帧 ， 按 Cal+R 组 合 键 打开 【导入 】 对 话 框 ， 在 其 中 选择 需要 


导入 的 图 





片 文件 ， 将 其 导入 到 舞台 中 ， 并 将 图 片 和 舞台 的 大 小 设置 为 340 像素 x453 


像素 ， 如 图 18-7 所 示 。 





图 18-6 ”新建 Flash 文档 18-7 导入 图 片 


莉 于 BY 在 图 层 1 的 第 2 帧 处 插入 空白 关键 帧 ， 然 后 按照 步骤 2 的 方法 将 素材 图 片 导入 
到 舞台 ， 并 调整 图 片 的 大 小 ， 如 图 18-8 所 示 。 

EC 按照 相同 的 方法 ， 分 别 在 第 3、4、5、6 帧 处 插入 空白 关键 帧 ， 并 在 对 应 的 关键 
帧 处 导入 不 同 的 素材 图 片 ， 完 成 后 的 效果 如 图 18-9 所 示 。 











图 18-8 插入 空白 关键 帧 并 导入 图 片 18-9 “完成 其 他 空白 关键 帧 的 操作 


四 于 BY 新 建 一 个 图 层 ， 选 择 工 具 栏 中 的 矩形 工具 ， 然 后 在 其 【属性 】 面 板 中 ， 将 笔触 
颜色 设置 为 白色 ， 填 充 颜 色 设置 为 无 ， 笔 触 大 小 设置 为 10，【 接 合 】 设 置 为 【 尖 
角 】， 如 图 18-10 所 示 。 

EECDDy 按 住 鼠标 左 键 在 舞台 外 侧 绘 制 一 个 白色 的 矩形 框 ， 效 果 如 图 18-11 所 示 。 

ED 按 Ctrl+F8 组 合 键 打 开 【 创 建新 元 件 】 对 话 框 ， 在 其 中 新 建 一 个 名 为 【按钮 】 的 
按钮 元 件 ， 如 图 18-12 所 示 。 

EB 单 击 【 确 定 】 按 钮 ， 即 可 进入 该 元 件 的 编辑 模式 中 ， 将 舞台 颜色 修改 为 黑色 ， 
然后 使 用 椭圆 工具 和 和 拢 形 工具 绘制 如 图 18-13 所 示 的 图 形 。 

EEC 选中 舞台 上 绘制 的 图 形 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【转换 为 元 件 】 命 
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令 ， 即 可 打开 【转换 为 元 件 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 【按钮 元 件 】， 并 
将 【类 型 】 设 置 为 【图 形 】， 如 图 18-14 所 示 ， 最 后 单 击 【 确 定 】 按 钮 即 可 。 

本 选中 图 层 1 中 的 弹 起 帧 上 的 元 件 ， 在 其 【属性 】 面 板 中 将 Alpha 值 设 置 为 
50%， 如 图 18-15 所 示 。 








图 18-10 设置 矩形 工具 的 属性 图 18-11 绘制 白色 的 矩形 框 





18-12 ”新 建 按钮 元 件 18-13 ”绘制 图 形 


转 六 为 元 件 x 





图 18-14 ”转换 为 图 形 元 件 图 18-15 设置 Alpha 值 


386 


上 



















第 

十 Dj 在 图 层 1 的 指针 经 过 帧 处 插入 关键 帧 ， 并 选中 该 帧 上 的 元 件 ， 然 后 在 其 【 属 加 
性 】 面 板 中 将 【样式 】 设 置 为 无 ， 如 图 18-16 所 示 。 时 
六 返回 到 场景 1 中 ， 新 建 一 个 图 层 ， 并 选中 新 建 图 层 的 第 1 帧 ， 将 【 库 】 面 板 中 的 网 
按钮 元 件 拖 到 舞台 右 侧 ， 并 使 用 任意 变形 工具 将 其 适当 地 缩小 ， 如 图 18-17 所 示 。 到 
Ee EE 前 

动 

态 

交 

互 

创 

建 

交 

互 

式 

动 

画 


图 18-16 将 色彩 效果 设置 为 无 图 18-17 将 按钮 元 件 拖 到 舞台 右 侧 
罗 选 中 舞台 上 的 按钮 元 件 ， 将 其 复制 ， 并 移 到 舞台 左 侧 ， 然 后 依次 选择 【修改 】 
变形 】 一 【水 平 翻转 】 命 令 ， 即 可 将 其 水 平 翻 转 ， 效 果 如 图 18-18 所 示 。 
> 选中 舞台 左 侧 的 按钮 元 件 ， 在 其 【属性 】 面 板 中 的 实例 名 称 文本 框 中 输入 














图 18-18 将 按钮 元 件 水 平 翻转 18-19 设置 左 侧 按钮 元 件 的 实例 名 称 


罗 选 中 舞台 右 侧 的 按钮 元 件 ， 在 其 【属性 】 面 板 中 的 实例 名 称 文本 框 中 输入 btn， 

妈 18-20 所 示 。 

小 新 建 一 个 图 层 ， 并 选中 新 建 图 层 的 第 1 帧 ， 按 F9 键 打开 【动作 】 对 话 框 ， 在 其 
中 输入 如 下 代码 ( 见 图 18-21): 

Stop () 

btn.addEventListener (MouseEvent .CLICK, onClick) 

function onClick(me:MouseEvent){ 


if(currentFrame==6){ 
gotoAndPlay (1); 
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} 
elsef{ 
nextFrame (); 
stop(); 
} 
} 
btnl .addEventListener (MouseEvent .CLICK, onClick) 
function onClickl (me:MouseEvent){ 
if(currentFrame==1)1{ 
gotoAndPlay (6); 
stop(); 





} 

elsel{ 
prevFrame () 7 
Stop () 





18-20 ”设置 右 侧 按钮 元 件 的 实例 名 称 18-21 输入 代码 


EC 至 此 ， 就 完成 了 按钮 切换 图 片 效果 的 制作 ， 按 Ctrl + Enter 组 合 键 进行 测试 ， 即 
可 测试 单 击 按钮 切换 图 片 的 播放 效果 ， 如 图 18-22 所 示 。 


SE ETTTTTTXE 


s 





18-22 ”测试 效果 


18.2.2 ”案例 2 一 一 制作 按钮 切换 背景 颜色 效果 


本 案例 比较 简单 ， 主 要 是 通过 按钮 元 件 和 代码 来 完成 背景 颜色 切换 的 制作 。 具 体操 作 步 
又 如 下 。 
EC 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【按钮 切换 背景 颜色 效果 .fla】 文档 ， 如 图 18-23 
所 示 。 
ERPp 在 【属性 】 面 板 中 ， 将 舞台 大 小 设置 为 260 像素 x369 像素 ， 填 充 颜色 设置 为 
#999999， 如 图 18-24 所 示 。 








图 18-23 新 建 Flash 文档 图 18-24 设置 舞台 属性 


EEJRS) 选择 工具 栏 中 的 矩形 工具 ， 然 后 在 其 【属性 】 面 板 中 ， 将 笔触 颜色 设置 为 无 ， 
填充 颜色 设置 为 339966， 如 图 18-25 所 示 。 

EEC 按 住 鼠标 左 键 ， 绘 制 一 个 与 舞台 一 样 大 小 的 矩形 ， 并 与 舞台 对 齐 ， 如 图 18-26 
所 示 。 





18-25 ”设置 矩形 工具 的 属性 18-26 ”绘制 矩形 


TBY 选中 绘制 的 矩形 ， 将 其 复制 ， 在 图 层 1 的 第 2 帧 处 插入 空白 关键 帧 ， 按 CaltV 
组 合 键 进行 粘贴 ， 然 后 将 其 填充 颜色 修改 为 蓝 色 ， 如 图 18-27 所 示 。 
ETB 在 图 层 1 的 第 3 帧 处 插入 空白 关键 帧 ， 按 CtrlV 组 合 键 进行 粘贴 ， 并 选中 复制 
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后 的 图 形 ， 将 其 填充 颜色 修改 为 #CC99FF， 如 图 18-28 所 示 。 


图 18-27 复制 矩形 并 更 改 颜 色 图 18-28 复制 矩形 并 更 改 颜色 


EC 选中 图 层 1 第 1 帧 上 的 矩形 ， 按 F8 键 打开 【转换 为 元 件 】 对 话 框 ， 在 其 中 的 
【名 称 】 文 本 框 中 输入 【绿色 矩形 】， 并 将 【类 型 】 设 置 为 【图 形 】， 如 图 18-29 
所 示 。 最 后 单 击 【确定 】 按 钮 ， 即 可 将 其 转换 为 图 形 元 件 。 

EEJep 依次 类 推 ， 将 图 层 1 的 第 2 帧 、 第 3 帧 上 的 矩形 分 别 转换 为 【 蓝 色 和 矩形】 和 
【粉色 矩形】 图 形 元 件 ， 如 图 18-30 所 示 。 


x 国 


图 18-29 ”转换 为 图 形 元 件 图 18-30 ”转换 其 他 元 件 


EEC 按 Ctl+F8 组 合 键 打开 【创建 新 元 件 】 对 话 框 ， 在 其 中 新 建 一 个 名 为 【绿色 按 
钮 】 的 按钮 元 件 ， 如 图 18-31 所 示 。 

EC) 单 击 【确定 】 按 钮 ， 即 可 进入 该 元 件 的 编辑 模式 中 ， 将 【 库 】 面 板 中 的 【绿色 
矩形 】 拖 到 舞台 中 ， 选 中 拖 入 舞台 的 绿色 和 矩形， 然后 在 其 【属性 】 面 板 中 ， 将 
【 宽 】 设 置 为 60，【 高 】 设 置 为 25， 效 果 如 图 18-32 所 示 。 
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创建 新 元 件 X 
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图 18-31 新 建 按钮 元 件 图 18-32 设置 矩形 的 大 小 


EC 在 图 层 1 的 指针 经 过 帧 处 插入 关键 帧 ， 选 择 工 具 栏 中 的 矩形 工具 ， 在 其 【 属 
性 】 面 板 中 ， 将 笔触 颜色 设置 为 无 ， 填 充 颜 色 设置 为 白色 ， 然 后 在 舞台 上 绘制 一 个 
矩形， 选中 绘制 的 矩形 ， 在 【 属性】 面板 中 将 【 宽 】 设 置 为 60，【 高 】 设 置 为 25， 
如 图 18-33 所 示 。 

EEY 选中 绘制 的 白色 矩形 ， 按 F8 键 打开 【转换 为 元 件 】 对 话 框 ， 在 其 中 将 【类 型 】 
设置 为 【图 形 】， 如 图 18-34 所 示 ， 单 击 【 确 定 】 按 钮 即 可 。 
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图 18-33 ”设置 矩形 属性 18-34 ”转换 为 图 形 元 件 

EEIE) 选中 舞台 上 的 【白色 矩形】 元 件 ， 在 其 【属性 】 面 板 中 将 Alpha 值 设置 为 
30%， 然 后 将 白色 和 矩形 和 绿色 和 矩形 重合 ， 效 果 如 图 18-35 所 示 。 

ECEE》 依次 类 推 ， 分 别 制 作 【 蓝 色 按钮 】 和 【粉色 按钮 】 按 钮 元 件 ， 完 成 后 的 效果 如 
图 18-36 所 示 。 

EED) 返回 到 场景 1 中 ， 新 建 图 层 2， 然 后 按 Ctrl+R 组 合 键 打开 【导入 】 对 话 框 ， 在 
其 中 选择 需要 导入 的 .png 格式 的 图 片 文件 ， 将 其 导入 到 舞台 ， 并 设置 图 片 的 大 小 ， 
如 图 18-37 所 示 。 

本 于 BY 选中 导入 的 图 片 ， 按 F8 键 打开 【转换 为 元 件 】 对 话 框 ， 在 其 中 的 【名 称 】 文 本 
框 中 输入 【卡拉 】， 并 将 【类 型 】 设 置 为 【影片 剪辑 】， 如 图 18-38 所 示 。 单 击 
【确定 】 按 钮 即 可 。 

EC 然后 在 【属性 】 面 板 中 的 【显示 】 选 项 组 内 ， 将 【混合 】 设 置 为 【 滤 色 】， 如 
18-39 所 示 。 

配对 BY 新 建 图 层 3， 然 后 使 用 矩形 工具 在 舞台 的 右上 角 绘 制 一 个 白色 矩形， 如 图 18-40 
所 示 。 
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图 18-35 ”使 矩形 重合 18-36 制作 其 他 按钮 元 件 





转换 为 元 件 


Musc s my Wfe. 





18-37 导入 图 片 18-38 ”转换 为 影片 剪辑 元 件 





18-39 设置 元 件 的 显示 方式 图 18-40 ”绘制 矩形 


EEIEDD 新 建 图 层 4， 将 【 库 】 面 板 中 的 【 蓝 色 按钮 】 元 件 拖 到 舞台 中 ， 并 调整 其 位 置 ， 
然后 在 其 【属性 】 面 板 中 的 实例 名 称 文本 框 中 输入 B， 如 图 18-41 所 示 。 

醒 对 DY 依次 类 推 ， 将 【粉色 按钮 】 和 【绿色 按钮 】 元 件 拖 到 舞台 中 的 合适 位 置 ， 并 在 
【属性 】 面 板 中 将 实例 名 称 分 别 设置 为 P 和 G， 如 图 18-42 所 示 。 








18-41 添加 元 件 并 设置 实例 名 称 图 18-42 添加 其 他 元 件 





stop(); 
G.addEventListener (MouseEvent .CLICK,tz1); 
function tzl(e:MouseEvent) :void{ 
gotoAndPlay (1); 
stop(); 
3 
P.addEventListener (MouseEvent .CLICK,tz2) 7 
function tz2(e:MouseEvent) :void{ 
gotoAndPlay (3); 
stop(); 
1 
B.addEventListener (MouseEvent .CLICK, tz3); 
function tz3(e:MouseEvent) :void{ 
gotoAndPlay (2); 
stop(); 





测试 的 效果 如 图 18-44 所 示 。 








图 18-43 输入 代码 图 18-44 ”测试 效果 


也 新 建 图 层 5， 按 F9 键 打开 【动作 】 面 板 ， 在 其 中 输入 如 下 代码 ( 见 图 18-43): 


本 ZY 至 此 ， 就 完成 了 按钮 切换 图 片 背 景 效 果 的 制作 ， 按 Ctrl+Enter 组 合 键 进行 测试 ， 


加 六 让 起 否 浏 半 喇 恒 “机 8+ 小 
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18.2.3 ”案例 3 一 一 制作 星光 闪烁 效果 
本 案例 介绍 了 星光 闪烁 效果 的 制作 方法 ， 主 要 是 通过 相关 代码 来 实现 的 。 具 体操 作 步 又 
如 下 。 


EC 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【星光 闪烁 效果 .fla】 文档 ， 如 图 18-45 所 示 。 


EEC 按 Ctl+R 组 合 键 打开 【导入 】 对 话 框 ， 在 其 中 选择 需要 导入 的 素材 文件 ， 如 
图 18-46 所 示 。 




















一 所 疝 可 打开 的 民 式 (fai Y 
图 18-45 新 建 Flash 文档 图 18-46 选择 图 片 


EEJSp 单 击 【打开 】 按 钮 ， 即 可 将 其 导入 到 舞台 中 ， 选 中 导入 的 图 片 ， 在 【属性 】 面 
板 中 将 【大 小 】 设 置 为 550 像素 x400 像素 ， 然 后 按 Ctrl+K 组 合 键 打开 【对 齐 】 


面板 ， 在 其 中 分 别 单 击 水 平 中 齐 按钮 和 垂直 中 齐 按钮 ， 使 图 片 与 舞台 对 齐 ， 如 图 18-47 
所 示 。 








EEC 按 Ctrl+F8 组 合 键 打 开 【 创 建新 元 件 】 对 话 框 ， 在 其 中 新 建 一 个 名 为 【椭圆 】 的 
影片 剪辑 元 件 ， 如 图 18-48 所 示 。 








创建 新 元 件 





18-47 ”设置 图 片 对 齐 方式 


图 18-48 新建 影片 剪辑 元 件 
EEJD) 单 击 【 确 定 】 按 钮 ， 即 可 进入 该 影片 剪辑 元 件 的 编辑 模式 中 ， 选 择 工 具 栏 中 的 
椭圆 工具 ， 然 后 按 Ctrl+Shift+F9 组 合 键 打开 【颜色 】 面 板 ， 在 其 中 将 笔触 颜色 设置 
为 无 ， 填 充 颜色 设置 为 【 径 向 渐变 】， 将 左右 色 块 均 设 置 为 白色 ， 并 将 中 间 色 块 的 


G0 


加 


A 设置 为 65%， 右 侧 色 块 的 A 设置 为 0%， 如 图 18-49 所 示 。 
EC 按 住 Shift 键 的 同时 在 舞台 上 绘制 一 个 正 圆 ， 选 中 绘制 的 圆 ， 在 其 【属性 】 面 板 
中 将 【 宽 】 和 【高 】 均 设置 为 63， 效 果 如 图 18-50 所 示 。 
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图 18-49 ”设置 椭圆 的 颜色 图 18-50 绘制 圆 


EC 按 Ctrl+F8 组 合 键 打开 【创建 新 元 件 】 对 话 框 ， 在 其 中 新 建 一 个 名 为 【十 字形 】 
的 影片 剪辑 元 件 ， 如 图 18-51 所 示 。 

EE 单 击 【 确 定 】 按 钮 ， 即 可 进入 该 元 件 的 编辑 模式 中 ， 选 择 工具 栏 中 的 椭圆 工 
具 ， 然 后 在 【颜色 】 面 板 中 将 笔触 颜色 设置 为 无 ， 填 充 颜色 设置 为 【 径 向 渐变 】， 
将 左右 色 块 的 颜色 均 设 置 为 白色 ， 并 将 右 侧 色 块 的 A 设置 为 75%， 如 图 18-52 所 示 。 











创建 新 元 件 X 





18-51 ”新 建 影 片 剪 辑 元 件 18-52 ”设置 椭圆 颜色 


SS 按 住 鼠标 左 键 在 舞台 上 绘制 一 个 椭圆 ， 并 选中 绘制 的 椭圆 ， 在 其 【属性 】 面 板 
中 将 【 宽 】 设 置 为 6，【 高 】 设 置 为 268， 效 果 如 图 18-53 所 示 。 
EE 按 Ctrl+F8 组 合 键 打开 【创建 新 元 件 】 对 话 框 ， 使 用 默认 名 称 ， 并 将 【类 型 】 设 
置 为 【图 形 】， 如 图 18-54 所 示 。 

了 单 击 【 确 定 】 按 钮 ， 即 可 进入 该 元 件 的 编辑 模式 中 ， 将 【 库 】 面 板 中 的 【十 字 
形 】 元 件 拖 到 舞台 中 ， 按 Ctrl+K 组 合 键 打开 【对 齐 】 面 板 ， 在 其 中 分 别 单 击 水 平 中 
齐 按钮 和 垂直 中 齐 按钮 ， 使 元 件 与 舞台 中 心 对 齐 ， 如 图 18-55 所 示 。 

EC 选中 舞台 上 的 元 件 ， 并 复制 一 个 相同 的 元 件 ， 选 中 复制 的 元 件 ， 然 后 选择 【 修 
改 】 一 【变形 】 一 【 顺 时 针 旋 转 90 度 】 命 令 ， 即 可 将 复制 出 的 元 件 水 平 翻转 ， 效 果 
如 图 18-56 所 示 。 
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图 18-53 ”绘制 并 设置 椭圆 图 18-54 新建 图 形 元 件 





图 18-55 ”添加 元 件 并 设置 对 齐 方式 图 18-56 复制 元 件 并 调整 元 件 位 置 
选中 这 两 个 对 象 ， 在 其 【属性 】 面 板 中 的 【 滤 镜 】 选 项 组 内 ， 单 击 【 添 加 滤 
镜 】 选 项 ， 从 弹出 的 菜单 中 选择 【发 光 】 选 项 ， 将 【模糊 X】 和 【模糊 Y】 都 
设置 为 10 像素 ， 将 【品质 】 设 置 为 【高 】， 将 【颜色 】 设 置 为 白色 ， 如 图 18-57 pp 
按 Ctrl+F8 组 合 键 打开 【创建 新 元 件 】 对 话 框 ， 在 其 中 新 建 一 个 名 为 【星星 】 和 
影片 剪辑 元 件 ， 并 选中 【为 ActionScript 导出 】 复 选 框 ， 然 后 在 【类 】 文 本 框 中 输入 
xx_mc， 如 图 18-58 所 示 。 








图 18-57 设置 发 光 滤 镜 图 18-58 新建 影 片 剪 辑 元 件 


396 


单 击 【 确 定 】 按 钮 ， 即 可 进入 该 元 件 的 编辑 模式 中 ， 将 【 库 】 面 板 中 的 【 椭 





圆 】 元 件 拖 到 舞台 中 心 ， 在 其 【属性 】 面 板 中 将 Alpha 值 设置 为 0%， 如 图 18-59 所 示 。 

确认 元 件 处 于 选中 状态 ， 在 【属性 】 面 板 的 【 滤 镜 】 选 项 组 内 ， 单 击 【添加 滤 
镜 】 按 钮 ， 从 弹出 的 菜单 中 选择 【发 光 】 选 项 ， 然 后 将 【模糊 入】 和 【模糊 Y】 都 
设置 为 50 像素 ， 将 【强度 】 设 置 为 165%， 将 【品质 】 设 置 为 【高 】， 将 【颜色 】 
设置 为 白色 ， 如 图 18-60 所 示 。 














图 18-59 将 【椭圆 】 元 件 拖 到 舞台 中 并 设置 Alpha 值 图 18-60 设置 元 件 的 发 光 滤 镜 
在 图 层 1 的 第 30 帧 处 插入 关键 帧 ， 并 选中 该 帧 上 的 元 件 ， 在 其 【属性 】 面 板 中 
将 【样式 】 设 置 为 【无 】， 如 图 18-61 所 示 。 
选中 图 层 1 第 1 一 30 帧 之 间 的 任意 一 帧 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 
【创建 传统 补 间 】 人 命令， 创建 传统 补 间 动 画 ， 然 后 在 该 图 层 的 第 40 帧 处 插入 
帧 ， 如 图 18-62 所 示 。 





18-61 设置 关键 由 图 18-62 ”创建 传统 补 间 动 画 


六 新 建 图 层 2， 将 【 库 】 面 板 中 的 元 件 1 拖 到 舞台 中 ， 并 对 齐 舞 台中 心 ， 确 认 选 中 
该 元 件 ， 在 【属性 】 面 板 中 将 Alpha 值 设 置 为 0%， 如 图 18-63 所 示 。 

在 图 层 2 的 第 30 帧 处 插入 关键 帧 ， 并 选中 该 帧 上 的 元 件 ， 在 其 【属性 】 面 板 中 

将 【样式 】 设 置 为 【无 】， 如 图 18-64 所 示 。 

选择 图 层 2 的 第 1 一 30 帧 之 间 的 任意 一 帧 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 
【创建 传统 补 间 】 命 令 ， 即 可 创建 传统 补 间 动 画 ， 如 图 18-65 所 示 。 

返回 到 场景 1 中 ， 新 建 图 层 2， 然 后 将 【 库 】 面 板 中 的 【星星 】 元 件 拖 到 舞台 
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中 ， 并 使 用 任意 变形 工具 调整 它们 的 大 小 和 位 置 ， 如 图 18-66 所 示 。 








图 18-63 将 元 件 1 拖 到 舞台 中 并 设置 Alpha 值 图 18-64 设置 关键 帧 





图 18-65 创建 传统 补 间 动 画 图 18-66 将 【星星 】 元 件 拖 到 舞台 中 
stel 先 择 图 层 2 的 第 1 帧 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【动作 】 命 令 ， 即 可 
打开 【动作 】 面 板 ， 在 其 中 输入 相关 代码 ， 如 图 18-67 所 示 。 
下 至此， 星光 闪烁 动画 就 制作 完成 了 ， 按 Ctrl+Enter 组 合 键 进行 测试 ， 测 试 效果 如 
图 18-68 所 示 。 












图 18-67 输入 代码 图 18-68 测试 效果 


也 





18.3 ”Flash 常用 组 件 的 使 用 


在 Flash 动画 的 交互 应 用 中 ， 组 件 常 与 ActionScript 脚本 配合 使 用 。 通 过 对 组 件 属性 和 参 
数 进行 设置 ， 并 将 组 件 所 获取 的 信息 传递 给 相应 的 ActionScript 脚本 ， 即 可 通过 脚本 执行 相应 
的 操作 ， 从 而 实现 最 基本 的 交互 功能 。 


18.3.1 案例 4 一 一 组 件 的 添加 与 删除 


添加 组 件 可 以 在 【组 件 】 面 板 中 实现 ， 从 而 将 选择 的 组 件 添加 到 舞台 中 。 添 加 组 件 的 具 
体操 作 步 又 如 下 。 
EEJDp 在 Flash CC 的 主 窗口 中 ， 选 择 【 窗 口 】 一 【组 件 】 命 令 ， 即 可 打开 【组 件 】 面 
板 ， 选 择 User Interface 选项 卡 ， 然 后 从 中 选择 需要 添加 到 舞台 上 的 组 件 ， 如 图 18-69 
所 示 。 
EEIDp 此 时 按 住 鼠标 左 键 不 放 ， 将 其 拖 动 到 舞台 或 双击 该 组 件 ， 即 可 将 所 选 组 件 添加 
到 舞台 中 ， 如 图 18-70 所 示 。 





同 六 引起 否 汀 导 呈 司机 81 游 


[ERS dn be 








图 18-69 选择 Button 组 件 图 18-70 添加 组 件 


删除 组 件 的 具体 操作 步骤 如 下 。 

EEC 在 Flash CC 的 主 窗 口中 ， 选 择 右 侧 的 【 库 】 选 项 卡 ， 即 可 进入 【 库 】 面 板 ， 如 

图 18-71 所 示 。 

EEIPp 在 【 库 】 面 板 中 选择 要 删除 的 组 件 ， 单 击 【 库 】 面 板 底部 的 【删除 】 按 钮 国 ， 
或 直接 将 组 件 拖 动 到 【删除 】 按 钮 上 ， 即 可 删除 组 件 ， 如 图 18-72 所 示 。 


5 要 从 Flash 影片 中 删除 已 添加 的 组 件 实例 ， 可 通过 删除 库 中 的 组 件 类 型 图 标 或 直 


接 选中 舞台 上 的 实例 ， 按 Delete 键 或 Backspace 键 即 可 删除 。 
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图 18-71 【 库 】 面 板 图 18-72 成 功 删除 组 件 


18.3.2 ”案例 5 一 一 Button 按钮 组 件 


Button( 按 钮 ) 组 件 是 一 个 可 调整 大 小 的 矩形 用 户 界面 按钮 ， 用 户 可 以 通过 鼠标 或 空格 键 按 
下 该 按钮 ， 以 在 应 用 程序 中 启动 操作 。 

下 面 通过 一 个 具体 实例 来 讲解 如 何在 Flash 中 使 用 Button 组 件 。 有 具体 操作 步骤 如 下 。 

EEJDp 启动 Flash CC， 然 后 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 空 
白文 档 ， 最 后 将 该 文档 保存 为 【Button 组 件 的 应 用 .fla】 文档 ， 如 图 18-73 所 示 。 

ED 选择 【文件 】 一 【导入 】 一 【导入 到 和 舞台】 命令 ， 即 可 打开 【导入 】 面 板 ， 在 
其 中 选择 相应 的 图 片 ， 将 其 导入 到 舞台 中 ， 然 后 分 别 设置 图 片 及 舞台 的 大 小 ， 如 
18-74 所 示 。 





图 18-73 新建 Flash 文档 18-74 ”导入 图 片 


EEIes 选择 【窗口 】 一 【组 件 】 命 令 ， 即 可 打开 【组 件 】 面 板 ， 在 其 中 单 击 User 
Interface 选项 卡 ， 从 展开 的 组 件 中 选择 Button 组 件 ， 如 图 18-75 所 示 。 

EGR 选择 该 组 件 后 ， 按 住 亿 标 左 键 不 放 ， 将 其 拖 动 到 场景 中 的 合适 位 置 ， 如 图 18-76 
所 示 。 

EECRD 选中 Button 组 件 ， 然 后 在 【属性 】 面 板 中 选择 【组 件 参数 】 选 项 卡 ， 在 label 右 
侧 的 文本 框 中 输入 【点 击 进入 主页 】， 并 选中 toggle 右 侧 的 复 选 枉 ， 如 图 18-77 所 示 。 

EECOUD 按 Ctrl + Enter 组 合 键 进行 测试 ， 即 可 预览 该 影片 效果 ， 如 图 18-78 所 示 。 





G4 






18-75 选择 Button 组 件 


18-77 设置 Button 组 件 的 参数 18-78 ”测试 影片 效果 


18.3.3 ”案例 6 一 一 CheckBox 复 选 框 组 件 


CheckBox( 复 选 框 ) 组 件 一 般 作 为 表单 或 Web 应 用 程序 中 的 一 个 基础 部 分 。 每 当 需 要 手 选 
一 组 非 相互 排斥 值 时 ， 都 可 以 使 用 该 组 件 。 简 而 言 之 ，CheckBox 组 件 就 是 在 某 一 组 选项 中 ， 
允许 有 多 个 选项 被 同时 选中 。 
下 面 制 作 一 个 简单 例子 来 讲解 CheckBox 组 件 的 使 用 。 有 具体 操作 步骤 如 下 。 
ET 启动 Flash CC， 然 后 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 空 
白文 档 ， 最 后 将 该 文档 保存 为 【CheckBox 组 件 的 应 用 .fla】 文 档 ， 如 图 18-79 所 示 。 
ED 将 舞台 的 大 小 设置 为 300 像素 x200 像素 ， 如 图 18-80 所 示 。 
EEC) 使 用 文本 工具 在 舞台 上 绘制 静态 文本 框 并 输入 文本 【以 下 早餐 您 比较 喜欢 哪 
些 ? 】， 如 图 18-81 所 示 。 
EEC 按 Ctrl + F7 组 合 键 打开 【组 件 】 对 话 框 ， 在 其 中 选择 User Interface 选项 卡 ， 从 
展开 的 组 件 中 选择 CheckBox 组 件 ， 如 图 18-82 所 示 。 
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18-79 新 建 Flash 文档 








] 以 下 早餐 您 比较 误 欢 哪些 ?人 














图 18-81 输入 文本 图 18-82 选择 CheckBox 组 件 


EC) 选择 CheckBox 组 件 之 后 ， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 到 舞台 中 的 合适 位 置 ， 共 
拖 电 6 个 该 组 件 ， 如 图 18-83 所 示 。 

ED 选中 舞台 上 的 第 1 个 CheckBox 组 件 ， 在 其 【属性 】 面 板 中 选择 【组 件 参数 】 选 
项 卡 ， 然 后 在 label 右 侧 的 文本 框 中 输入 文本 【麦片 】”， 并 单 击 舞 台 空 白 处 ， 即 可 为 
该 按钮 命名 ， 如 图 18-84 所 示 。 














以 下 早餐 您 比较 喜欢 哪些 ? 
回 Label 器 Label 
DD Label [DD Label 
DD Label 器 Label 
18-83 添加 6 个 CheckBox 组 件 18-84 设置 组 件 名 称 


EEC 按照 上 述 操作 ， 依 次 修改 其 他 5 个 复 选 框 的 参数 ， 如 图 18-85 所 示 。 
按 Ctrl + Enter 组 合 键 进行 测试 ， 即 可 预览 该 动画 效果 ， 如 图 18-86 所 示 。 





以 下 早餐 您 比较 喜欢 哪些 ? 以 下 早餐 您 比较 喜欢 哪些 ? 
癌 去 片 癌 面包 唱片 口 m® 
UU 训 j 锯 锯 回 允 回 银 她 


占 二 到 口 其 他 口 癌 其 他 











图 18-85 设置 其 他 组 件 名 称 图 18-86 测试 动画 效果 


18.3.4 ”案例 7 一 一 ComboBox 下 拉 列 表 组 件 


ComboBox 组 件 只 需要 使 用 最 少 的 创作 和 脚本 编写 操作 ， 即 可 向 Flash 影片 中 添加 可 滚动 
的 单 选 下 拉 列 表 。ComboBox 组 件 既 可 用 于 创建 静态 组 合 框 ， 也 可 用 于 创建 可 编辑 组 合 框 。 
静态 组 合 框 是 一 个 可 滚动 的 下 拉 列 表 ， 可 从 列表 中 选择 项 目 。 可 编辑 组 合 框 是 一 个 可 滚动 的 
下 拉 列 表 ， 其 上 方 有 一 个 输入 文本 字段 ， 可 在 其 中 输入 文本 滚动 到 该 列表 中 的 匹配 菜单 命令 。 
下 面 通过 具体 的 实例 来 介绍 ComboBox 下 拉 列 表 组 件 的 选项 和 功能 。 有 具体 操作 步骤 如 下 。 
EC) 启动 Flash CC， 然 后 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 空 
白文 档 ， 最 后 将 该 文档 保存 为 【ComboBox 组 件 的 应 用 .fla】 文 档 ， 如 图 18-87 所 示 。 
EECDy 将 舞台 大 小 设置 为 550 像素 x350 像素 ， 然 后 使 用 文本 工具 在 舞台 中 绘制 静态 文 
本 框 并 输入 文本 【请 根据 选择 搜索 电影 : 】， 如 图 18-88 所 示 。 





图 18-87 ”新建 Flash 文档 18-88 设置 舞台 大 小 并 输入 文本 


EC 再 次 使 用 文本 工具 ， 在 舞台 中 绘制 静态 文本 框 并 设置 文本 大 小 及 文本 颜色 之 
后 ， 输 入 文本 【类 型 ，】， 如 图 18-89 所 示 。 

EC 选择 【窗口 】 一 【组 件 】 命 令 ， 即 可 打开 【组 件 】 面 板 ， 选 择 User Interface 选 
项 卡 ， 然 后 从 展开 的 组 件 中 选择 ComboBox 组 件 ， 如 图 18-90 所 示 。 

EC 在 选择 ComboBox 组 件 之 后 ， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 到 舞台 中 的 合适 位 
置 ， 如 图 18-91 所 示 。 

EC 选择 ComboBox 组 件 ， 在 其 【属性 】 面 板 中 选择 【组 件 参数 】 选 项 卡 ， 然 后 在 
prompt 右 侧 的 文本 框 中 输入 【动作 】， 并 在 舞台 空白 处 单 击 ， 即 可 为 下 拉 列 表 框 命 
名 ， 如 图 18-92 所 示 。 
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请 根据 选择 搂 索 电影 : 





溉 

















18-89 ”输入 文本 


请 根据 选择 搜索 电影 : 
类 型 : oi=] 





图 18-91 添加 ComboBox 组 件 18-92 ”修改 组 件 名 称 


ED 单 击 dataProvider 参数 右 侧 的 图 标 国 ， 即 可 打开 【 值 】 对 话 框 ， 在 其 中 单 击 国 按 
钮 ， 即 可 增加 下 拉 列 表 框 中 的 选项 ， 并 在 label 项 中 输入 相应 名 称 ， 如 图 18-93 所 示 。 

ECESRUBD 按照 上 述 操作 ， 创 建 并 设置 其 他 两 个 下 拉 列表 框 ， 如 图 18-94 所 示 。 如 果 设 置 的 
选项 超过 了 5 个 ， 则 在 下 拉 列 表 杠 中 将 自动 使 用 滚动 条 显示 。 

















请 根据 选择 搜索 电影 : 
类 型 : | wm jj 
国家 : [me jj 
年 代 : 206 | 
图 18-93 【 值 】 对 话 框 图 18-94 创建 并 设置 其 他 两 个 下 拉 列 表 框 


EEC 依次 选择 【控制 】 一 【测试 影片 一 【在 Flash Professional 中 】 命 令 ， 即 可 预 
览 该 动画 效果 ， 如 图 18-95 所 示 。 
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请 根据 选择 搜索 电影 : 请 根据 选择 搜索 电影 : 








18-95 ”测试 动画 效果 
18.3.5 ”案例 8 一 一 List 平 铺 滚动 组 件 


List 平 铺 深 动 组件 和 ComboBox 组 件 的 属性 设置 相似 ， 区 别 在 于 ComboBox 组 件 是 单行 
下 拉 滚 动 ， 而 List 是 平 铺 滚 动 。 
下 面 通过 一 个 具体 实例 来 说 明 List 列表 框 组 件 的 选项 和 功能 。 有 具体 操作 步骤 如 下 。 
EEC 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 
空白 文档 ， 最 后 将 该 文档 保存 为 【List 组 件 的 应 用 .fla】 文档 ， 如 图 18-96 所 示 。 
EEIPys 依次 选择 【文件 】 一 【导入 】 一 【导入 到 有 舞台】 命令 ， 即 可 打开 【导入 】 对 话 
框 ， 在 其 中 选择 相应 的 图 片 ， 并 将 其 导入 到 舞台 ， 然 后 分 别 设置 图 片 和 舞台 的 大 
小 ， 如 图 18-97 所 示 。 











18-96 新建 Flash 文档 图 18-97 导入 图 片 


EC) 使 用 文本 工具 在 舞台 中 绘制 静态 文本 框 并 设置 文字 大 小 和 文本 颜色 ， 然 后 输入 
文本 内 容 【 最 受 大 家 喜欢 的 音乐 , 】， 如 图 18-98 所 示 。 

EEC 按 Ctlt+ F7 组 合 键 打开 【组 件 】 面 板 ， 在 其 中 选择 User Interface 选项 卡 ， 然 后 
从 展开 的 组 件 中 选择 List 组 件 ， 如 图 18-99 所 示 。 

EECD) 选择 List 组 件 后 ， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 到 舞台 中 的 合适 位 置 ， 然 后 在 其 【 属 
性 】 面 板 中 调整 其 大 小 为 150x150( 其 默认 大 小 为 100x100)， 如 图 18-100 所 示 。 

EC 选择 List 组 件 ， 在 其 【属性 】 面 板 中 选择 【组 件 参 数 】 选 项 卡 ， 单 击 
dataProvider 参数 右 侧 的 图 标 回 ， 即 可 打开 【 值 】 对 话 框 ， 在 其 中 单 击 按钮 国 ， 增 加 
下 拉 列 表 框 中 的 选项 并 在 label 项 中 输入 相应 名 称 ， 如 图 18-101 所 示 。 
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18-98 输入 文本 18-99 选择 List 组件 





图 18-100 添加 List 组 件 并 设置 组 件 大 小 图 18-101 【 值 】 对 话 框 

ED 单 击 【确定 】 按 钮 ， 即 可 把 在 【 值 】 对 话 框 中 增加 的 选项 添加 到 List 列表 中 ， 
如 图 18-102 所 示 。 

EECRD) 按 Ctrl + Enter 组 合 键 进行 测试 ， 即 可 预览 该 动画 效果 ， 如 图 18-103 所 示 。 








最 受 大 家 喜欢 的 音乐 : 


入 


EE 

















18-102 ”添加 后 的 效果 18-103 ”测试 动画 效果 


18.3.6 ”案例 9 一 一 RadioButton 单 选 按钮 组 件 
RadioButton 组 件 是 经 常见 到 的 单 选 按钮 组 件 ， 主 要 用 于 选择 一 个 唯一 的 选项 。 该 组 件 不 


S 406 


a 


能 单个 使 用 ， 需 要 两 个 及 两 个 以 上 的 RadioButton 组 件 联合 成 组 使 用 才 行 。 当 选择 该 组 中 某 一 
个 选项 后 ， 将 自动 取消 对 该 组 其 他 选项 的 选择 。 
下 面 将 通过 具体 实例 来 介绍 RadioButton 单 选 按钮 组 件 的 选项 和 功能 。 有 具体 操作 步骤 如 下 。 

















EC 启动 Flash CC， 然 后 依次 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 
Flash 空白 文档 ， 最 后 将 该 文档 保存 为 【RadioButton 组 件 的 应 用 .fla】 文档 ， 如 图 18-104 
所 示 。 

TZ 将 舞台 大 小 设置 为 300 像素 x200 像素 ， 然 后 使 用 文本 工具 在 舞台 中 绘制 静态 文 
本 框 并 设置 文字 大 小 和 文本 颜色 ， 最 后 输入 文本 【你 打算 去 什么 样 的 景点 旅游 ? 】， 
如 图 18-105 所 示 。 











] 你 打工 去 什么 样 的 景点 旅游 ?下 
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图 18-104 ”新建 Flash 文档 图 18-105 设置 舞台 大 小 并 输入 文本 
ETBY 依次 选择 【窗口 】 一 【组 件 】 命 令 ， 即 可 打开 【组 件 】 面 板 ， 在 其 中 选择 
RadioButton 组 件 ， 如 图 18-106 所 示 。 
EP 选中 RadioButton 组 件 之 后 ， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 到 舞台 中 的 合适 位 置 ， 
共 拖 电 6 个 该 组 件 ， 如 图 18-107 所 示 。 


你 打算 去 什么 样 的 景点 旅游 ? 


Label Label 


Label 





18-106 选择 RadioButton 组 件 18-107 添加 6 个 RadioButton 组 件 


EEC) 选中 舞台 上 的 第 1 个 RadioButton 组 件 ， 在 其 【属性 】 面 板 中 选择 【组 件 参数 】 
选项 卡 ， 然 后 在 label 参数 右 侧 的 文本 框 中 输入 文本 【繁华 都 市 】， 并 单 击 舞台 空白 
处 ， 即 可 为 该 按钮 命名 ， 如 图 18-108 所 示 。 
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ET 按照 上 述 操作 ， 依 次 修改 其 他 5 个 单 选 按钮 的 参数 ， 如 图 18-109 所 示 。 


生生 你 打算 去 什么 样 的 景点 旅游 ? 
你 打算 么 样 的 景点 旅游 ? 





{Gi ou Ou Osee 

© Label © Label 〇 名 胜 古 迹 山海 滨海 名 

Ww bb 本 〇 自然 脉 枫 () 其 他 ， 请 注 明 
18-108 ”设置 参数 18-109 ”设置 其 他 组 件 的 参数 


EDD9 选 择 【 控 制 】 一 【测试 影片 一 【在 Flash Professional 中 】 命 令 ， 即 可 预览 该 
动画 效果 。 在 其 中 只 可 选中 一 个 单 选 按钮 ， 当 选中 下 一 个 单 选 按钮 时 ， 即 可 蔡 代 当 
前 所 选 选项 ， 如 图 18-110 所 示 。 


ee 








你 打算 去 什么 样 的 景点 旅游 ? 


你 打算 去 什么 样 的 景点 旅游 ? 


中 甘 符 孝 市 〇 水 乡 古 入 OO 系 汪 部 市 (水乡 古村 


中 吉星 古迹 人 《) 汉 污 老 久 名 吉星 古迹 局 汽 溪 霉 吧 


中 自然 录 杭 中 其 他 ， 户 注 强 


中 自然 入 爸 中 其 他 ， 请 注 旺 





图 18-110 “测试 动画 效果 
18.3.7 ”案例 10 一 一 ProgressBar 加 载 进 度 组 件 


ProgressBar 组 件 用 于 显示 加 载 内 容 的 进度 。ProgressBar 可 用 于 显示 加 载 图 像 和 部 分 应 用 
程序 的 状态 。 当 要 加 载 的 内 容量 是 已 知 时 ， 可 以 使 用 确定 的 进度 栏 。 确 定 进度 栏 是 一 段 时 间 
内 会 务 进度 的 线性 表示 ; 当 要 加 载 的 内 容量 未 知 时 ， 可 以 使 用 不 确定 的 进度 栏 ， 可 以 添加 标 
签 来 显示 加 载 内 容 的 进度 。 

下 面 通过 一 个 具体 实例 来 说 明 ProgressBar 滚动 条 窗口 组 件 的 选项 和 功能 。 有 具体 操作 步骤 
如 下 。 

本 IP 启动 Flash CC， 然 后 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 空 

白文 档 ， 最 后 将 该 文档 保存 为 【ProgressBar 组 件 的 应 用 .fla】 文档 ， 如 图 18-111 所 示 。 
EGGDy 将 舞台 大 小 设置 为 300x200， 然 后 使 用 文本 工具 在 舞台 上 绘制 静态 文本 框 并 设 
置 文字 大 小 和 文本 颜色 ， 最 后 输入 文本 内 容 【 正 在 加 载 ， 请 稍 候 .……】， 如 图 18-112 
所 示 。 

ES 按 Cal + F7 组 合 键 打开 【组 件 】 面 板 ， 然 后 在 其 中 选择 ProgressBar 组 件 ， 如 
图 18-113 所 示 。 

EC 选择 该 组 件 后 ， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 到 舞台 中 的 合适 位 置 ， 如 图 18-114 
所 示 。 
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图 18-113 ”选择 ProgressBar 组 件 图 18-114 添加 组 件 


EEDp 在 该 组 件 的 【属性 】 面 板 中 选择 【组 件 参 数 】 选 项 卡 ， 从 direction 参数 的 下 拉 
列表 框 中 选择 left 选项 ， 然 后 再 从 mode 参数 下 拉 列 表 框 中 选择 polled 选项 ， 如 
图 18-115 所 示 。 

ED 选择 【控制 】 一 【测试 影片 】 一 【在 Flash Professional 中 】 命 令 ， 即 可 预览 该 
动画 效果 ， 如 图 18-116 所 示 。 








18-115 设置 ProgressBar 组 件 18-116 ”测试 动画 效果 


18.3.8 案例 11 一 一 ScrollPane 滚动 条 窗口 组 件 
ScrollPane 滚动 条 窗口 组 件 是 动态 文本 框 与 输入 文本 框 的 组 合 ， 相 当 于 在 动态 文本 框 和 输 





。 
409 参 





网 页 设计 与 网 站 建设 
案例 课堂 (第 2 版 ) 8… 





入 文本 框 中 添加 了 水 平和 垂直 的 滚动 条 。 即 通过 该 组 件 ， 用 户 可 以 在 某 个 固定 大 小 的 文本 杠 
中 通过 拖 动 滚动 条 来 显示 更 多 内 容 。 
下 面 通过 一 个 具体 实例 来 介绍 ScrollPane 滚动 条 窗口 组 件 的 选项 和 功能 。 具 体操 作 如 下 。 
EC 启动 Flash CC， 然 后 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 空 
白文 档 ， 最 后 将 该 文档 保存 为 【ScrollPane 组 件 的 应 用 .fla】 文档 ， 如 图 18-117 所 示 。 
EC 在 【属性 】 面 板 中 将 舞台 大 小 设置 为 300 像素 x200 像素 ， 然 后 使 用 文本 工具 在 
舞台 中 绘制 静态 文本 框 并 设置 文字 大 小 和 文本 颜色 ， 最 后 输入 文本 内 容 【 请 您 对 我 
们 的 工作 提出 宝贵 的 意见 ， 】， 如 图 18-118 所 示 。 








| 请 您 对 我 们 的 工作 提出 宗 贵 的 意见 : | 














图 18-117 新 建 Flash 文档 图 18-118 设置 舞台 大 小 并 输入 文本 内 容 


EEIBp 选择 【窗口 】 一 【组 件 】 命 令 ， 即 可 打开 【组 件 】 面 板 ， 然 后 在 其 中 选择 
ScrollPane 组 件 之 后 ， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 到 舞台 中 的 合适 位 置 ， 如 图 18-119 
所 示 。 

EIYY 在 该 组 件 的 【属性 】 面 板 中 选择 【组 件 参 数 】 选 项 卡 ， 然 后 分 别 在 
horizontalScrollPolicy 参数 和 VerticalScrollPolicy 参数 的 下 拉 列 表 框 中 选择 on 选项 ， 
如 图 18-120 所 示 。 


请 您 对 我 们 的 工作 提出 宝贵 的 意见 : 





18-119 ”添加 组 件 18-120 ”设置 组 件 参 数 


国 于 BY 选择 【控制 】 一 【测试 影片 】 一 【在 Flash Professional 中 】 命 令 ， 即 可 预览 该 
动画 效果 ， 如 图 18-121 所 示 。 


Dd 
人 铭 410 


rollPane 钥 件 的 应 用 .swf — 口 x 


请 您 对 我 们 的 工作 提出 宝贵 的 意见 : 


同 凡 二 寺 下 测 洁 司 恒 坤 8| 游 中 





18-121 ”测试 动画 效果 
18.4 ”综合 案例 一 一 制作 飘 雪 效果 


本 实例 主要 介绍 在 flash 中 制作 下 雪 效 果 的 方法 。 有 具体 操作 步骤 如 下 。 
EEC 启动 Flash CC， 然 后 选择 【文件 】 一 【新 建 】 命 令 ， 即 可 创建 一 个 新 的 Flash 空 NN 





熙 起 此 喇 半 站 簿 


白文 档 ， 最 后 将 该 文档 保存 为 【 飘 雪 效 果 .fla】 文档 ， 如 图 18-122 所 示 。 
ET 按 CtrltR 组 合 键 打开 【导入 】 对 话 框 ， 在 其 中 选择 本 实例 需要 用 到 的 图 片 文 
件 ， 然 后 将 其 导入 到 【 库 】 面 板 中 ， 如 图 18-123 所 示 。 






18-122 ”新 建 Flash 文档 图 18-123 导入 素材 图 片 


四 TB 将 【 库 】 面 板 中 的 【背景 图 】 拖 到 舞台 中 ， 然 后 使 用 任意 变形 工具 调整 图 片 的 
大 小 ， 如 图 18-124 所 示 。 

EC 选择 【插入 】 一 【新 建 元 件 】 命 令 ， 即 可 打开 【创建 新 元 件 】 对 话 框 ， 在 【名 
称 】 文 本 框 中 输入 【飘落 的 雪 】， 在 【类 型 】 下 拉 列 表 框 中 选择 【影片 剪辑 】 选 
项 ， 然 后 在 【ActionScript 链接 】 区 域 中 选中 【为 ActionScript 导出 】 复 选 框 ， 并 在 
【类 】 文 本 框 中 输入 自 定 义 的 类 名 称 px， 如 图 18-125 所 示 。 

ETB 单 击 【 确 定 】 按 钮 后 会 弹出 【ActionScript 类 和 警告】 对话 框 ， 如 图 18-126 所 示 ， 
此 时 单 击 【确定 】 按 钮 即 可 。 

ES 在 新 建 影 片 剪 辑 元 件 的 编辑 模式 中 ， 将 【 库 】 面 板 中 的 【雪花 】 图 片 拖 到 舞台 
中 ， 按 CtrltB 组 合 键 将 其 打 散 ， 如 图 18-127 所 示 。 
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图 18-124 将 【背景 图 】 拖 到 舞台 中 图 18-125 新 建 影片 剪辑 元 件 








18-126 【ActionScript 类 警告 】 对 话 框 图 18-127 将 图 片 打 散 


EC 使 用 魔术 棒 工 具 单 击 雪花 以 外 的 黑色 背景 ， 然 后 按 Delete 键 将 其 删除 ， 完 成 后 
的 效果 如 图 18-128 所 示 。 

ET 选中 舞台 上 的 雪花 对 象 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【转换 为 元 件 】 命 
令 ， 即 可 打开 【转换 为 元 件 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 【雪花 】， 并 将 

【类 型 】 设 置 为 【图 形 】， 如 图 18-129 所 示 ， 单 击 【确定 】 按 钮 即 可 。 








18-128 ”删除 黑色 背景 18-129 ”转换 为 图 形 元 件 





在 【 库 】 面 板 中 双击 【飘落 的 雪 】 影 片 剪 辑 元 件 ， 即 可 进入 该 元 件 的 编辑 模式 
中 ， 选 中 图 层 1， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【添加 传统 引导 层 】 命 令 ， 即 
可 在 图 层 1 上 方 添加 一 个 引导 层 ， 如 图 18-130 所 示 。 

选择 【引导 层 : 图 层 1】 图 层 ， 然 后 使 用 钢笔 工具 在 舞台 上 绘制 一 条 平滑 的 曲 
线 ， 如 图 18-131 所 示 。 





Bb 
a 1 


引导 层 : 图 层 1 。 
型 图 层 ! ， 





I | 
18-130 ”添加 引导 层 图 18-131 绘制 曲线 
图 层 1】 图 层 的 第 90 帧 处 插入 关键 帧 ， 然 后 选中 图 层 1 第 1 帧 上 
的 元 件 ， 将 其 拖 至 曲线 的 开始 处 ， 如 图 18-132 所 示 。 

在 图 层 1 的 第 90 帧 处 插入 关键 帧 ， 然 后 将 元 件 拖 到 曲线 的 结束 处 ， 如 图 18-133 
所 示 。 









18-132 ”将 元 件 拖 至 曲线 开始 处 图 18-133 ”将 元 件 拖 到 曲线 结束 处 


选中 图 层 1 的 第 2 帧 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 】 命 
令 ， 即 可 创建 补 间 动 画 ， 如 图 18-134 所 示 。 

返回 到 场景 1 中 ， 新 建 一 个 图 层 ， 并 选中 新 建 图 层 的 第 1 帧 ， 按 F9 键 打开 【 动 
作 】 面 板 ， 在 其 中 输入 如 下 代码 ( 见 图 18-135): 


Var i:Number=1; 
addEventListener (Event .ENTER FRAME, xx); 
function xx(event:Event) :void{ 
Var x mc:px=new px(); 
addCchild(x mc); 
x mc.x=Math.random()*550; 
x mc.scaleXx=0.2+Math.random()*0.5; 





同 凡 二 起 否 测 引 呈 恒山 8 没 
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x mc.scaleY=0.2+Math.random()*0.5; 

和 

if(i>100){ 
this.removeChildAt (1); 
i=100; 





图 18-134 ”创建 传统 补 间 动 画 图 18-135 输入 代码 
EBY 至 此 ， 就 完成 了 雪花 飘落 效果 的 制作 ， 按 Ctrl+Enter 组 合 键 进行 测试 ， 即 可 测试 


雪花 飘落 的 播放 效果 ， 


如 图 18-136 所 示 。 





图 18-136 ”测试 效果 


18.5 疑难 解 惑 


疑问 1: 在 ActionScript 中 的 注释 有 什么 作用 ? 
答 : 在 ActionScript 中 使 用 注释 一 般 用 来 注 明 该 段 语句 的 作用 、 特 点 及 用 法 等 。 通 过 在 程 











序 中 使 用 注释 ， 可 增强 程序 的 可 
的 运行 没有 任何 作用 ， 并 不 影响 











[ 读 性 ， 方 便 用 户 的 阅读 和 作者 的 修改 。 而 程序 的 注释 与 程序 
程序 的 大 小 、 运 行 速度 等 特性 。 


疑问 2: 如 何 快速 打开 【组 件 】 面 板 ? 
答 : 按 Ctrl+F7 组 合 键 即 可 快速 打开 【组 件 】 面 板 ， 在 其 中 包括 User Interface 组 件 和 


Video 组 件 两 大 类 。 





第 19 章 
让 网 页 动 起 来 
制作 动态 网 站 的 


Logo 与 Banner 





Logo 是 指 站 点 中 使 用 的 标志 或 者 徽标 ， 用 来 传达 站 点 、 公 司 的 理念 。Banner 
是 指 居于 网 页 头 部 ， 用 来 展示 站 点 主要 宣传 内 容 、 站 点 形象 或 者 广告 内 容 的 部 分 。 
Banner 部 分 的 大 小 并 不 固定 。 本 章 主要 介绍 制作 动态 网 站 Logo 与 Banner 的 实例 。 
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19.1 制作 滚动 文字 Logo 
制作 滚动 文字 Logo 的 具体 操作 步骤 如 下 。 
19.1.1 设置 文档 属性 


设置 文档 属性 的 具体 操作 步骤 如 下 。 

EC 在 Flash CC 操作 界面 中 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 
框 ， 在 【常规 】 选 项 卡 中 设置 文档 的 参数 ， 如 图 19-1 所 示 。 

EEDD9 单 击 【 确 定 】 按 钮 ， 即 可 新 建 一 个 空白 文档 ， 如 图 19-2 所 示 。 


EE 








图 19-1 【新 建文 档 】 对 话 框 图 19-2 ”空白 文档 
EEJBp 选择 【修改 】 一 【文档 】 命 令 ， 打 开 【 文 档 设 置 】 对 话 框 ， 在 其 中 设置 文档 的 
尺寸 ， 如 图 19-3 所 示 。 
EC 设置 完毕 后 ， 单 击 【 确 定 】 按 钮 ， 即 可 看 到 设置 文档 属性 后 的 显示 效果 ， 如 
图 19-4 所 示 。 




















图 19-3 【文档 设置 】 对 话 框 图 19-4 修改 后 的 空白 文档 
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19.1.2 制作 文字 元 件 


制作 文字 元 件 的 具体 操作 步骤 如 下 。 

5STIY 选择 【插入 】 一 【新 建 元 件 】 命 令 ， 打 开 【 创 建新 元 件 】 对 话 框 ， 在 【名 称 】 
文本 框 中 输入 【文本 】， 并 选择 【类 型 】 为 【按钮 】， 如 图 19-5 所 示 。 

EEC 单 击 【 确 定 】 按 钮 ， 进 入 文本 编辑 状态 中 ， 如 图 19-6 所 示 。 








创建 新 元 件 x 


图 19-5 【创建 新 元 件 】 对 话 框 图 19-6 文本 编辑 状态 


Jeuueg JJ 0601 避 坪 到 讲 时 答 中 一 一 料 册 妾 河 到 所 山 61 汀 


TRY 选择 工具 箱 中 的 文本 工具 ， 然 后 选择 【窗口 】 一 【属性 】 命 令 ， 打开 【属性 】 
面板 ， 在 其 中 设置 文本 的 属性 ， 具 体 的 参数 设置 如 图 19-7 所 示 。 

EC 单 击 【 属 性 】 面 板 中 的 【关闭 】 按 钮 ， 返 回 到 【文本 编辑 】 状 态 中 ， 在 其 中 输 
入 文字 ， 如 图 19-8 所 示 。 











图 19-7 【属性 】 面板 图 19-8 输入 文字 


19.1.3 ”制作 滚动 效果 


制作 文字 滚动 效果 的 具体 操作 步骤 如 下 。 

JI 单 击 场景 1， 进 入 场景 中 。 然 后 选择 【窗口 】 一 【 库 】 命 令 ,， 将 【 库 】 面 板 中 的 
元 件 拖 电 到 场景 中 ， 如 图 19-9 所 示 。 

ET 在 【时 间 轴 】 面 板 中 右 击 第 20 帧 ， 在 弹出 的 快捷 菜单 中 选择 【插入 关键 帧 】 命 
令 ， 插 入 关键 帧 ， 如 图 19-10 所 示 。 
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19-9 拖 时 元 件 19-10 ”插入 关键 帧 


GE 选择 图 层 1 中 的 第 1 帧 ， 然 后 选择 【窗口 一 【 属 性】 命令 ,打开 【属性 】 面 
板 ， 在 其 中 设置 色彩 效果 的 相关 参数 ， 具 体 参数 如 图 19-11 所 示 。 

EC 设置 完毕 后 ， 返 回 到 Flash CC 窗口 中 ， 在 【时 间 轴 】 面 板 中 选择 第 1 帧 到 第 20 

帧 之 间 的 任意 一 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 】 命 令 ， 创 建 

传统 补 间 动画 ， 如 图 19-12 所 示 。 








图 19-11 【属性 】 面 板 图 19-12 创建 传统 补 间 动 画 


ED 选中 第 20 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【复制 帧 】 命 令 ， 即 可 复制 第 20 
帧 的 内 容 ， 如 图 19-13 所 示 。 

TB 单 击 【 时 间 轴 】 面 板 中 的 【新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 。 选 中 第 1 帧 并 右 
击 ， 在 弹出 的 快捷 菜单 中 选择 【粘贴 帧 】 命 令 ， 粘 贴 所 复制 的 帧 ， 如 图 19-14 所 示 。 

EC 选中 图 层 2， 在 图 层 2 中 的 第 20 帧 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【插入 关 
键 帧 】 命 令 ， 插 入 一 个 关键 帧 ， 如 图 19-15 所 示 。 

TB 选中 工具 箱 中 的 自由 变换 工具 ， 对 场景 中 的 图 层 2 中 的 第 20 帧 处 的 图 形 做 自由 
变换 ， 具 体 的 参数 在 【属性 】 面 板 中 可 以 设置 ， 如 图 19-16 所 示 。 

EE 了 TE 设置 完毕 后 ， 返 回 到 Flash CC 窗口 中 ， 在 【时 间 轴 】 面 板 中 选择 图 层 2 中 的 第 
1 帧 到 第 20 帧 之 间 的 任意 一 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 】 
命令 ， 创 建 传统 补 间 动 画 ， 如 图 19-17 所 示 。 

EC 按 Ctrl+Enter 组 合 键 ， 即 可 预览 文字 滚动 效果 ， 如 图 19-18 所 示 。 











上 





图 19-13 ”复制 由 图 19-14 ”粘贴 帧 
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图 19-16 【属性 】 面 板 





19-17 ”创建 传统 补 间 动 画 图 19-18 ”预览 动画 


19.2 ”制作 产品 的 Banner 


网 页 中 除了 文字 Logo 外 ， 常 常 还 会 放置 动态 Banner， 来 吸引 浏览 者 的 眼球 。 下 面 制作 一 


个 产品 的 Banner。 


19.2.1 制作 文字 动画 


制作 文字 动画 的 具体 操作 步骤 如 下 。 

SS 在 Flash CC 操作 界面 中 新 建 一 个 空白 文档 。 
双击 【图 层 1】 名 称 ， 将 其 更 名 为 【文字 】， 如 

图 19-19 所 示 。 19-19 【时 间 轴 】 面 板 

ITP» 单 击 【工具 】 面 板 中 的 【文本 工具 】 国 ， 在 
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【 属性】 面板 中 设置 文本 类 型 为 【静态 文本 】， 字 体 为 Arial Black， 字 体 大 小 为 
50，【 颜 色 】 为 红色 ， 如 图 19-20 所 示 。 

EECJep 在 舞台 中 间 位 置 输入 文字 MM。 选 择 【 修 改 】 一 【转换 为 元 件 】 命 令 ， 弹 出 
【转换 为 元 件 】 对 话 框 ， 设 置 元 件 【 类 型 】 为 【图 形 】， 如 图 19-21 所 示 。 











转 泣 为 元 件 x 





19-20 【属性 】 面板 图 19-21 【转换 为 元 件 】 对 话 框 
单 击 【 确 定 】 按 钮 ， 即 可 将 文字 转换 为 图 形 ， 如 图 19-22 所 示 。 


ECEDp 选中 【文字 】 图 层 的 第 10 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【插入 关键 帧 】 
命令 ， 如 图 19-23 所 示 。 





19-22 文字 转换 为 图 形 图 19-23 ”插入 关键 帧 


本 TY 选中 第 1 帧 ， 将 舞台 上 的 文字 MM 垂直 向 上 移动 到 舞台 的 上 方 (使 其 刚 出 舞 
台 )， 然 后 选中 第 1 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 】 命 令 ， 如 
图 19-24 所 示 。 

ET 选择 【文字 】 图 层 的 第 1 帧 ， 然 后 选择 文字 MM。 打 开 【 属 性 】 面 板 ， 在 【 色 

彩 效果 】 选 项 组 的 【样式 】 下 拉 列 表 框 中 选择 Alpha 选项 ， 设 置 Alpha 值 为 0， 如 

图 19-25 所 示 。 




















图 19-24 ”创建 传统 补 间 动 画 图 19-25 【属性 】 面 板 
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EEC 选择 第 49 帧 ， 按 Fs 键 插入 帧 ， 使 动画 延续 到 第 49 帧 ， 如 图 19-26 所 示 。 





19-26 ”延续 动画 帧 


ETE> 新 建 一 个 图 层 ， 并 命名 为 【文字 1】， 然 后 单 击 第 10 帧 ， 按 F7 键 插入 空白 关键 
帧 ， 如 图 19-27 所 示 。 

65 单 击 【 工 具 】 面 板 中 的 【文本 工具 】 国 ， 在 【属性 】 面 板 中 设置 其 文本 类 型 为 
【静态 文本 】， 字 体 为 Arial， 字 体 大 小 为 30，【 颜 色 】 为 黑色 ， 如 图 19-28 所 示 。 








19-27 ”插入 空白 关键 帧 19-28 设置 文本 属性 


OY 在 舞台 上 输入 文字 SU， 再 次 在 文字 的 下 方位 置 输入 文字 SU， 颜 色 设置 为 灰 
色 ， 如 图 19-29 所 示 。 

EE 于 PY 选中 输入 的 文字 ， 选 择 【 修 改 】 一 【转换 为 元 件 】 命 令 ， 将 输入 的 文字 转换 为 

图 形 元 件 ， 如 图 19-30 所 示 。 


图 19-29 输入 文字 图 19-30 ”转换 为 图 形 元 件 




















19.2.2 ”制作 文字 遮 罩 动 画 


制作 文字 和 遮 罩 动画 的 具体 操作 步骤 如 下 。 
TY 选择 【文字 1】 图 层 的 第 15 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【转换 为 关键 
帧 】 命 令 ， 将 其 和 文字 MM 的 左边 对 齐 ; 然后 选择 第 10 帧 并 右 击 ， 在 弹出 的 快捷 
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菜单 中 选择 【创建 传统 补 间 】 命 令 ， 接 着 选择 第 49 帧 ， 按 F5 键 插入 帧 ， 如 图 19-31 
所 示 。 
革新 建 一 个 图 层 ， 并 命名 为 【 庶 单 1】。 选 择 第 1 帧 ， 单 击 【 工 具 】 面 板 中 的 矩形 


工具 ， 在 舞台 上 绘制 一 个 矩形 ， 放 在 SU 文字 的 左 侧 ， 如 图 19-32 所 示 。 

















suMM 





图 19-31 插入 帧 图 19-32 绘制 矩形 
EC) 右 击 图 民 【 械 单 1】 名 称 ， 在 弹出 的 快捷 菜单 中 选择 【 谈 单 层 】 命 令 ， 如 图 19-33 


所 示 。 
同 理 ， 制 作出 文字 MM 右 侧 ERROOM 文字 的 遮 音 动画， 如 图 19-34 所 示 。 





图 19-33 ”创建 庶 淖 层 图 19-34 ”制作 其 他 文字 的 遮 淖 
19.2.3 制作 图 片 动画 


制作 图 片 动画 的 具体 操作 步骤 如 下 。 

ET 选择 【文件 】 一 【导入 到 库 】 命 令 ， 打 开 【 导 入 到 库 】 对 话 框 ， 在 其 中 选择 需 
要 导入 到 库 的 图 片 ， 如 图 19-35 所 示 。 

EC 单 击 【打开 】 按 钮 ， 即 可 将 图 片 导入 到 库 之 中 ， 如 图 19-36 所 示 。 

ECDRB) 新 建 一 个 图 层 ， 将 其 命名 为 【图 片 1】。 选 中 第 27 帧 并 右 击 ， 按 F7 键 插入 空白 
关键 帧 ， 将 库 中 的 1 图 片 拖 到 舞台 上 ， 并 调整 其 大 小 和 位 置 ， 然 后 选择 【修改 】 一 
【转换 为 元 件 】 命 令 ， 将 图 片 转 换 为 图 形 元 件 ， 如 图 19-37 所 示 。 
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19-35 【导入 到 库 】 对 话 框 图 19-36 【 库 】 面 板 8 

ZY 选中 第 32 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【转换 为 关键 帧 】 命 令 ， 然 后 选 ” 与 
择 第 27 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 补 间 动 画 】 命 令 ， 接 着 选择 第 3 

49 帧 ， 如 图 19-38 所 示 。 加 
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图 19-37 添加 图 片 图 19-38 ”创建 补 间 动 画 


ET 单 击 【 图 片 1】 图 层 的 第 27 帧 ， 在 舞台 上 选中 图 片 1。 打 开 【 属 性 】 面 板 ， 在 
【色彩 样式 】 选 项 组 的 【样式 】 下 拉 列 表 框 中 选择 Alpha 选项 ， 设 置 Alpha 值 为 0， 
如 图 19-39 所 示 。 

四 TY 最 后 图 片 的 显示 效果 如 图 19-40 所 示 。 
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图 19-39 【属性 】 面 板 图 19-40 图 片 显 示 效 果 
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同 理 ， 创 建 另外 两 张 图 片 的 动画 效果 ， 如 图 19-41 所 示 。 
按 Ctrl+Enter 组 合 键 ， 即 可 预览 动画 效果 ， 如 图 19-42 所 示 。 




















Pre -四 
suMIMERRoon 文件 上” 坦 在 (V) 控制 (C) 释 动 C) 
| 
Bo 
suM MAROO 
图 19-41 添加 其 他 图 片 图 19-42 ”预览 动画 


19.3 疑难 解 惑 


疑问 1: 如 何 使 网 页 Banner 更 具 吸 引力 ? 


答 : 常见 的 方法 如 下 。 

(1) 使 用 简单 的 背景 和 文字 。 制 作 时 注意 构图 要 简单 ， 颜 色 要 醒目 ， 角 度 要 明显 ， 对 比 
要 强烈 。 

(2) 巧妙 地 使 用 文字 ， 使 文本 和 Banner 中 的 其 他 元 素 有 机 地 结合 起 来 ， 充 分 利用 字体 的 
样式 、 形 状 、 粗 细 、 颜 色 等 来 补充 和 加 强 图 片 的 力量 。 

(3) 使 用 深 色 的 外 围 边框 ， 因 为 在 站 点 中 应 用 Banner 时 ， 大 都 不 为 Banner 添加 轮廓 。 
如 果 Banner 的 内 容 都 集中 在 中 央 ， 那 么 边缘 就 会 过 于 空白 。 如 果 没 有 边框 ，Banner 就 会 和 页 
面 融 为 一 体 ， 从 而 降低 Banner 的 关注 度 。 


疑问 2: 如何 快 速 选择 文本 工具 ? 


答 : 有 时 为 了 在 舞台 上 添加 文本 ， 需 要 使 用 文本 工具 ， 虽 然 可 以 单 击 【 工 具 】 面 板 中 的 
【文本 工具 】 选 项 ， 但 是 直接 按 工 键 可 以 快速 选择 文本 工具 。 
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第 20 章 
第 21 章 


第 22 章 


第 23 章 


动态 网 站 开发 语言 基础 一 一 认识 PHP 语言 
制作 动态 网 页 基础 一 一 配置 动态 网 站 运行 
环境 

构建 动态 网 站 后 台数 据 一 一 使 用 MySQL 
数据 库 

开启 动态 网 站 制作 之 路 一 一 动态 网 站 应 用 
模块 开发 


第 20 音 
动态 网 站 开发 语言 百 


基础 一 一 认识 
PHP 语言 


要 想 自己 动手 建立 网 站 ， 掌 握 一 门 网 页 编程 语言 是 必需 的 ， 因 为 无 论 多 么 绚丽 
的 网 页 ， 都 要 由 语言 编程 去 实现 。 本 章 主 要 介绍 PHP 语言 网 页 编程 常用 知识 点 。 
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20.1 PHP 基本 知识 


PHP 全 名 为 Personal Home Page， 是 英文 Hypertext Preprocessor( 超 级 文本 预 处 理 语言 ) 的 
别名 。PHP 是 一 种 创建 动态 交互 性 站 点 的 强 有 力 的 服务 器 端 脚本 语言 。PHP 是 免费 的 ， 并 且 
使 用 广泛 。 


20.1.1 PHP 的 概念 


PHP 是 一 种 在 服务 器 端 执 行 的 嵌入 HTML 文档 的 脚本 语言 ， 其 语言 风格 类 似 于 C 语言 ， 
被 广泛 应 用 于 动态 网 站 的 制作 中 。PHP 语言 借鉴 了 C 和 Java 等 语言 的 部 分 语法 ， 并 有 自己 的 
特性 ， 使 Web 开发 者 能 够 快速 地 编写 动态 生成 页 面 的 脚本 。 对 初学 者 而 言 ，PHP 的 优势 是 可 
以 快速 入 门 。 

与 其 他 编程 语言 相 比 ，PHP 是 将 程序 嵌入 到 HTML 文档 中 去 执行 ， 执 行 效率 比 完全 生成 
HTML 标记 的 方式 要 高 许多 。PHP 还 可 以 执行 编译 后 的 代码 ， 编 译 可 以 达到 加 密 和 优化 代码 
运行 的 作用 ， 使 代码 运行 得 更 快 。 另 外 ，PHP 具有 非常 强大 的 功能 ， 所 有 的 CGI 的 功能 PHP 
都 能 实现 ， 而 且 支 持 几乎 所 有 流行 的 数据 库 及 操作 系统 。 最 重要 的 是 PHP 还 可 以 用 C、C++ 
进行 程序 的 扩展 。 


20.1.2 PHP 语言 的 优势 


PHP 能 够 迅速 发 展 ， 并 得 到 广大 使 用 者 的 喜爱 ， 主 要 原因 是 PHP 不 仅 有 一 般 脚 本 所 具有 
的 功能 ， 而 且 有 其 自身 的 优势 。PHP 的 具体 特点 如 下 。 

(1) 源 代码 完全 开放 。 所 有 的 PHP 源 代 码 事实 上 都 可 以 得 到 。 读 者 可 以 通过 Interet 获 
得 需要 的 源 代 码 ， 快 速 修改 利用 。 

(2) 完全 免费 。 和 其 他 技术 相 比 ，PHP 本 身 是 免费 的 。 读 者 使 用 PHP 进行 Web 开发 无 
须 支付 任何 费用 。 

(3) 语法 结构 简单 。 因 为 PHP 结合 了 C 语言 和 Perl 语言 的 特色 ， 编 写 简单 ， 方 便 易 懂 。 
可 以 被 嵌入 到 HIML 语言 中 ， 它 相对 于 其 他 语言 ， 编 辑 简单 ， 实 用 性 强 ， 更 适合 初学 者 。 

(4) 跨 平台 性 强 。 由 于 PHP 是 运行 在 服务 器 端的 脚本 ， 可 以 运行 在 UNIX、Linux、 
Windows 下 。 

(5) 效率 高 。PHP 消耗 相当 少 的 系统 资源 ， 并 且 程 序 开发 快 ， 运 行 快 。 

(6) 强大 的 数据 库 支持 。 支 持 目前 所 有 的 主流 和 非 主流 数据 库 ， 使 PHP 的 应 用 对 象 非常 
广泛 。 

(7) 面向 对 象 。 从 PHP 5.5 开始 ， 面 向 对 象 方面 都 有 了 很 大 的 改进 ， 现 在 PHP 完全 可 以 
用 来 开发 大 型 商业 程序 。 


20.2 PHP 中 的 数据 类 型 


从 PHP 4 开始 ，PHP 中 的 数据 类 型 不 再 需要 事先 声明 ， 不 同 的 数据 类 型 其 实 就 是 所 储存 
数据 的 不 同 种 类 。PHP 的 数据 类 型 主要 包括 : 字符 串 、 整 数 、 浮 点 数 、 罗 辑 、 数 组 、 对 象 、 
NULL。 


20.2.1 整 型 


童 导 中 应 水 忆 导 习 二 地 机 0Z 由 四 





整 型 (integers) 是 数据 类 型 中 最 为 基本 的 类 型 。 在 现 有 的 32 位 的 运算 器 的 情况 下 ， 整 型 的 六 
取 值 是 从 -2147483648 到 2147483647 之 间 。 整 型 可 以 表示 为 十 进 制 、 十 六 进 制 和 八进制 。 使 了 
用 PHP var dumpO 会 返回 变量 的 数据 类 型 和 值 。 eR 

例如 : 次 

3560 // 十 进 制 整数 

01223 // 八 进 制 整数 


0x1223 // 十 六 进 制 整数 


20.2.2 ” 浮 点 型 


浮 点 型 (floating-point) 就 是 表示 实数 。 在 大 多 数 运行 平台 下 ， 这 个 数据 类 型 的 大 小 为 8 个 
字 节 。 它 的 近似 取 值 范围 是 2.2E-308 到 1.8E+308( 科 学 计数 法 )。 
例如 : 


-1.432 
1E+07 
0.0 





20.2.3 布尔 值 


布尔 值 (boolean) 只 有 两 个 值 ， 就 是 tue 和 false。 布 尔 值 是 十 分 有 用 的 数据 类 型 ， 通 过 
它 ， 程 序 实 现 了 逻辑 判断 的 功能 。 

而 对 于 其 他 数据 类 型 ， 基 本 都 有 布尔 属性 。 

(1) 整 型 ， 为 0 时 ， 其 布尔 属性 为 false， 为 非 零 值 时 ， 其 布尔 属性 为 tue。 

(2) 浮 点 型 ， 为 0.0 时 ， 其 布尔 属性 为 false， 为 非 零 值 时 ， 其 布尔 属性 为 true。 

(3) 字符 串 型 ， 空 字符 串 “”， 或 者 零 字 符 串 “0” 时 ， 为 false， 包 含 除 此 以 外 的 字符 串 
时 为 true。 

(4) 数组 型 ， 若 不 含 任何 元 素 ， 为 false， 只 要 包含 元 素 ， 则 为 true。 

(5) 对 象 型 ， 资 源 型 ， 永 远 为 true。 

(6) 空 型 ， 则 永远 为 false。 


和 
429 多 


网 页 设计 与 网 站 建设 
案例 课堂 (第 2 版 ) @ 一 


20.2.4 字符 串 型 


字符 串 型 的 数据 是 表示 在 引号 之 间 的 。 引 号 分 为 “”( 双 引号 ) 和 “”( 单 引号 )。 这 两 种 引 
号 的 表示 方式 都 可 以 表示 字符 串 。 但 是 这 两 种 表示 也 有 一 定 区 别 。 双 引号 几乎 可 以 包含 所 有 
的 字符 ， 但 是 在 其 中 的 变量 显示 的 是 变量 的 值 ， 而 不 是 变量 的 变量 名 。 单 引号 内 的 字符 是 被 
直接 表示 出 来 的 。 

下 面 通 过 一 个 案例 来 讲述 上 面 几 种 类 型 的 使 用 方法 和 技巧 。 

【 例 20.1】 常 用 数据 类 型 的 使 用 方法 (实例 文件 为 sh20\20.1.php)。 代 码 如 下 : 


<HTML> 

<HEAD> 
<TITLE> 变 量 的 类 型 </TITLE> 

</HEAD> 

<BODY> 

<?php 
Snel 2010 
$int2= 01223; // 八 进 制 整数 
$int3=0x1223; // 十 六 进 制 整数 
echo "输出 整数 类 型 的 值 : "7 


echo $intl; 





eeho Nee // 输 出 一 个 制 表 符 
echo $int2; // 输 出 659 

echo "\t"; 

echo $int3; // 输 出 4643 


echo "<br>"; 
$floatl=54.66; 
echo $floatl; // 输 出 54.66 
echo "<br>™ 
echo "输出 布尔 型 变量 : "; 
echo (Boolean) ( $int1); // 将 intl 整 型 转化 为 布尔 变量 
echo "<br>"; 
$string1l=" 字 符 串 类 型 的 变量 "; 
echo $stringl; 
曙 区 
</BODY> 
</HTML> 


程序 运行 结果 如 图 20-1 所 示 。 
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生出 艇 类 型 的 人 2012 659 4643 
数组 是 PHP 变量 的 集合 ， 它 是 按照 “ 键 值 ” et 
与 “ 值 ” 对 应 的 关系 组 织 数 据 的 ， 数 组 的 键 值 可 
以 是 整数 也 可 以 是 字符 串 。 在 默认 情况 下 ， 数 组 
元 素 的 键 值 为 从 零 开始 的 整数 。 
在 PHP 中 ， 使 用 listO 函 数 或 array0 函 数 来 创 
建 数 组 ， 也 可 以 直接 进行 赋值 。 
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20-1 例 20.1 的 程序 运行 结果 


【 例 20.2】 使 用 array0 函 数 创建 数组 (实例 文件 为 ch20\20.2.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<TITLE> 数 组 变量 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$arr=array (15, 1E+05, "秋风 吹 不 尽 ， 总 是 玉 关 情 。"); 
for ($i=0;$i<3;$i++) 
{ 
echo "$arr[$i]<br>"; 
} 
?> 
</BODY> 
</HTML> 
程序 运行 结果 如 图 20-2 所 示 。 从 上 述 代码 中 可 一 
以 看 出 本 程序 采用 for 循环 语句 输出 整个 数组 ， 。 @) 6m 5-6] Ge 


文件 站 ” 连 罚 (E) ” 豆 看 (V) 履 项 夹 (A 工具 [帮助 (H) 


echo0 函 数 返回 当前 数组 指针 的 索引 值 。 | E 
20.2.6 ”对 象 型 碰 风 中 不 尽 ， 汪 是 玉 关 情 ， 


对 象 是 存储 数据 和 有 关 如 何 处 理 数据 的 信息 的 
数据 类 型 。 在 PHP 中 ， 必 须 明确 地 声明 对 象 。 首 先 图 20-2 例 20.2 的 程序 运行 结果 
我 们 必须 声明 对 象 的 类 ， 对 此 ， 我 们 使 用 class 关 
键 词 。 类 是 包含 属性 和 方法 的 结构 ， 然 后 我 们 在 对 象 类 中 定义 数据 类 型 ， 然 后 在 该 类 的 实例 
中 使 用 此 数据 类 型 。 


20.2.7 NULL 型 


Null 类 型 是 仅 拥有 NULL 这 一 个 值 的 类 型 。 这 个 类 型 是 用 来 标记 一 个 变量 为 空 的。 一 个 
空 字符 串 与 一 个 NULL 是 不 同 的 。 在 数据 库存 储 时 会 把 空 字符 串 和 NULL 区 分 开 处 理 。 
NULL 型 在 布尔 判断 时 永远 为 false。 很 多 情况 下 ， 在 声明 一 个 变量 时 可 以 直接 先 赋值 为 Null 
空 型 。 例 如 ，$value = NULL。 


20.2.8 数据 类 型 转换 

数据 从 一 个 类 型 转换 到 另外 一 个 类 型 ， 就 是 数据 类 型 转换 。 在 PHP 语言 中 ， 有 两 种 常见 
的 转换 方式 : 自动 数据 类 型 转换 和 强制 数据 类 型 转换 。 

1. 自动 数据 类 型 转换 


这 种 转换 方法 最 为 常用 ， 直 接 输 入 数据 的 转换 类 型 即 可 。 例 如 Float 型 转换 为 整数 Int 
型 ， 小 数 点 后 面 的 数 将 被 舍弃 。 如 果 float 数 超过 了 整数 的 取 值 范围 ， 则 结果 可 能 是 0 或 者 整 
数 的 最 小 负数 。 




















侍 导 中 应 水 书号 习 寺 起 才 0Z 小 a 








中 洒 dHd 范 丑 
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【 例 20.3】 自 动 数据 类 型 转换 (实例 文件 为 ch20\20.3-php)。 代 码 如 下 : 


<HTML> 

<HEAD> 
<TITLE> 自 动 数据 类 型 转换 </TITLE> 

</HEAD> 

<BODY> 

<?php 

$f£101=1.86; 
echo (int) $flol."<br>"; 
$f102=4E32; // 超 过 整数 取 值 范围 
echo (int) $flo2; 








?> 
</BODY> 
</HTML> 
程序 运行 结果 如 图 20-3 所 示 。 a 
2 强制 数据 类 型 转换 @ [由 -他 hapyV/localho 只 ”CC | 轿 目 动 数 据 闪 王 转 换 





文中 中 锻 志 (E) ”查看 (V) 收藏 突 (A) IRm 帮助 (H) 
在 PHP 中 ， 可 以 使 用 settypeO) 函 数 强制 转换 数 |， 
据 类 型 。 基 本 语法 格式 如 下 : 


Bool settype (var,string type) 


【 例 20.4】 强 制 数据 类 型 转换 (实例 文件 为 图 20-3” 例 20.3 的 程序 运行 结果 
ch20\20.4.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 

<TITLE> 强 制 数 据 类 型 转换 </TITLE> 
</HEAD> 
<BODY> 








二 口 x 
[GE- © re/eche.. P ~ © | @ mais 
<?php 文件 月 六 得 E) 下 看 (V)。 收 呈 六 工具 TT) 帮助 (H) 
$f1o1=1.86; 1 











echo setType ($flol,"int"); 
?> 

</BODY> 

</HTML> 


程序 运行 结果 如 图 20-4 所 示 。 





20-4 例 20.4 的 程序 运行 结果 


20.3 ”PHP 中 的 常量 与 变量 


在 PHP 中 ， 常 量 是 一 旦 声明 就 无 法 改变 的 值 。 变 量 像 是 一 个 贴 有 名 字 标 签 的 空 盒 子 。 不 
同 的 变量 类 型 对 应 不 同 种 类 的 数据 ， 就 像 不 同 种 类 的 东西 要 放 入 不 同 种 类 的 盒子 一 样 。 


20.3.1 案例 1 一 一 声明 和 使 用 常量 


PHP 通过 define() 函 数 来 声明 常量 。 语 法 格式 如 下 : 


壤 432 


i 


define ("常量 名 "， 常 量 值 ) ; 


常量 名 是 一 个 字符 串 ， 通 常 在 PHP 编码 规范 的 指导 下 使 用 大 写 的 英文 字符 表示 。 比 如 : 
CLASS NAME、MYAGE 等 。 

常量 值 可 以 是 很 多 种 PHP 的 数据 类 型 ， 可 以 是 数组 ， 也 可 以 是 对 象 ， 当 然 还 可 以 是 字符 
和 数字 。 

【 例 20.5】 声 明 与 使 用 常量 (实例 文件 为 ch20\20.5.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 

<TITLE> 自 定义 变量 </TITLE> 
</HEAD> 
<BODY> 
<?php 

define ("HURNY"," 花 间 一 壶 酒 ， 独 酌 无 相亲 。 举 杯 邀 明月 ， 对 影 成 三 人 。 月 既 不 解 饮 ， 影 徒 随 
我 身 。 暂 伴 月 将 影 ， 行 乐 须 及 春 。 我 歌 月 徘徊 ， 我 舞 影 零乱 。 醒 时 同 交欢 ， 醉 后 各 分 散 。 永 结 无 情 
游 ， 相 期 屠 云 汉 。") ; 





下 应 dHd 范 芝 一 一 剖 打 嘎 玉 汰 忆 导 习 寺 起 届 0z 滤 时 











echo HUANY; 
?> 
</BODY> 
</HTML> 
程序 运行 结果 如 图 20-5 所 示 。 ee 
[@@-© w/ecahe. P- © | @ ER 
站 了 ES 
常量 只 能 储存 布尔 型 、 整 型 、 浮 文件 (有 注 (E)】 二 WV) 羽 基 交工 具 和夫 且 (H) 
注 花 间 一 恋 士 ， 独 本 无 相亲 、 举 杯 抛 明月， 对 影 成 三 人 。 月 婚 不 角 
有 最 点 型 和 字符 囊 数据 。 钦 ， 影 和 疆 忽 身 。 亲 件 月 交际， 汪 和 有 各 查 。 各 睛 绯 僻 ， 折 
起 影 零乱 。 醒 时 同 交 次 ， 醉 后 各 分 静 。 永 结 元 情 游 ， 相 期 如 云 汉 。 


20.3.2 ”案例 2 一 一 声明 与 使 用 变量 


PHP 中 的 变量 一 般 以 $ 作 为 前 级 ， 然 后 以 字 
母 a~z 的 大 小 写 或 者 “_”( 下 划 线 ) 开 头 。 这 是 变量 的 一 般 表 示 。 
合法 的 变量 名 可 以 是 : 


$hello 
$Aforml 
$_formhandler (类 似 我 们 见 过 的 $_PosT 等 ) 


非法 的 变量 名 如 : 

$168 

$!like 

一 般 的 变量 表示 很 容易 理解 ， 但 是 有 两 个 变量 表示 概念 则 容易 混淆 ， 这 就 是 可 变 变 量 和 
变量 的 引用 。 下 面 通过 例子 对 它们 进行 学 习 。 

【 例 20.6】 声 明 与 使 用 变量 (实例 文件 为 ch20\20.6.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 

<TITLE> 系 统 变量 </TITLE> 
</HEAD> 





图 20-5 例 20.5 的 程序 运行 结果 


. 
‘3@ 
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<BODY> 
<?php 

$value0 = "guest"; 

$$value0 = "customer™"; 

echo $guest."<br />"; 

S$guest = "feifei"; 

echo $guest."\t".$$value0."<br />"; 

$valuel = "xiaoming"; 

$value2 = &$valuel; 

echo $valuel."\t".$value2."<br />"; 





- 0O x 
由 -| 全 hepyV/localho- PD ~ 0 Os 
文件 (站 ” 奖 纺 () 坦 看 M) 收藏 夫 (A) 工具 (1 帮助 (H) 

















$value2 = "lili"; i 
echo $valuel."\t".$value2; xiaoning xiaoming 
2> lili 1ili 
</BODY> 
</HTML> 
程序 运行 结果 如 图 20-6 所 示 。 风光 和 人 的 和 卫生 让 人 全 付 本 
20.3.3 ”案例 3 一 一 变量 的 作用 域 


所 谓 变 量 作 用 域 (variable scope)， 是 指 特 定 变量 在 代码 中 可 以 被 访问 到 的 位 置 。 在 PHP 中 
有 6 种 基本 的 变量 作用 域 法 则 ， 具 体 介绍 如 下 。 

(1) 内 置 超 全 局 变量 (Built-in superglobal variables)， 在 代码 中 的 任意 位 置 都 可 以 访问 得 到 。 

(2) 常数 (constants)， 一 旦 声明 ， 它 就 是 全 局 性 的 。 可 以 在 函数 内 外 使 用 。 

(3) 全 局 变量 (global variables)， 在 代码 间 声 明 ， 可 在 代码 间 访 问 ， 但 是 不 能 在 函数 内 
访问 。 

(4) 在 函数 中 声明 为 全 局 变量 的 变量 ， 就 是 同名 的 全 局 变量 。 

(5) 在 函数 中 创建 和 声明 为 静态 变量 的 变量 ， 在 函数 外 是 无 法 访问 的 。 但 是 这 个 静态 变 


量 的 值 是 可 以 保留 的 。 

(6) 在 函数 中 创建 和 声明 的 局 部 变量 ， 在 函数 外 是 无 法 访问 的 ， 并 且 在 本 函数 终止 时 
退出 。 

1. 全 局 变量 


全 局 变量 ， 其 实 就 是 在 函数 外 声明 的 变量 ， 在 代码 间 都 可 以 访问 ， 但 是 在 函数 内 是 不 能 
访问 的 ， 这 是 因为 函数 默认 就 不 能 访问 在 其 外 部 的 全 局 变量 。 下 面 通过 案例 介绍 全 局 变量 的 
使 用 方法 和 技巧 。 

【 例 20.7】 全 局 变量 的 使 用 (实例 文件 为 ch20\20.7.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<TITLE> 全 局 变量 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$room = 20; 
function showrooms (){ 
echo $room; 





showrooms (); 














一 Lm] x 
a $room. ' 间 房间 。'; @ 加 JJ@hapyeaho- P - |[@ Re 
i Hm WA SRV ta IROD Wal 
</HTML> 20 间 房间 。 
程序 运行 结果 如 图 20-7 所 示 。 
2. 静态 变量 





20-7” 例 20.7 的 程序 运行 结果 
静态 变量 只 是 在 函数 内 存在 ， 函 数 外 无 法 访 


问 。 但 是 执行 后 ， 其 值 保留 。 也 就 是 说 这 一 次 执行 完毕 后 ， 这 个 静态 变量 的 值 保留 ， 下 一 次 
再 执行 此 函数 时 ， 这 个 值 还 可 以 调用 。 

下 面 通过 实例 介绍 静态 变量 的 使 用 方法 和 技巧 。 

【 例 20.8】 静 态 变 量 的 使 用 (实例 文件 为 ch20\20.8.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<TITLE> 静 态 变量 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$person = 20; 
function showpeople(){ 
static $person = 5; 
$persont+t+; 
echo ' 此 时 静态 变量 的 值 为 ' .$person.' <br />'; 
} 
showpeople (); 
echo $person.' 为 变量 的 值 <br />'; 


下 应 dHd 范 科 一 一 剖 打 嘎 玉 本 忆 导 习 寺 吉 才 0z 滤 鲁 








- 0O x 
由 -| 四 hepWlocalho-. DP ~ © | @ 标志 变量 
文人 (D。 壬 句 (E) 查看 (V) 收藏 (A) 工具 (T) 帮助 (H) 




















Sa” ， 
Pe 此 时 划 坊 交 量 的 值 为 ， 7 
</BODY> 
</HTML> 
运行 有 图 20-8 例 20.8 运行 
程序 运行 结果 如 图 20-8 所 示 。 图 例 20.8 的 程序 运行 结果 


20.4 ”PHP 中 的 运算 符 


PHP 包含 3 种 类 型 的 运算 符 ， 即 一 元 运算 符 、 二 元 运算 符 和 三 元 运算 符 。 一 元 运算 符 用 
在 一 个 操作 数 之 前 ;二 元 运算 符 用 在 两 个 操作 数 之 间 ;， 三 元 运算 符 用 在 三 个 操作 数 之 间 。 


20.4.1 案例 4 一 一 算术 运算 符 
算术 运算 符 是 最 简单 也 是 最 常用 的 运算 符 。 常 见 的 算术 运算 符 如 表 20-1 所 示 。 
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表 20-1 算术 运算 符 

















运算 符 名 称 
十 加 法 运算 
二 减法 运算 
es 乘法 运算 
/ 除法 运算 
% 取 余 法 运算 
二 十 累加 运算 
< 累 减 运算 
【 例 20.9】 算 术 运 算 符 的 使 用 (实例 文件 为 ch20\20.9.php)。 代 码 如 下 : 
<HTML> 
<HEAD> 
<TITLE> 算 术 运 算 符 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$a=13; 
$b=2; 


echo $a."+".$b."="; 
echo $a+$b."<br>"; 
echo Sa"—" $b"=" 
echo $a-$b."<br>"; 
echo $a"*". Sb"=" 
echo $a*$b."<br>"; 
echo $a."/".$b."="; 
echo $a/$b."<br>"; 
ht 
echo $a%s$b."<br>"; 
echo $a."++"."="; 
echo $at++."<br>"; 
:el nA 
Scho das" <Dbr>"y 





- 0O x 
@ WH-@ htpi//localho.. PD - CO 人 算术 运算 符 
文中 (F) 入 句 (E) 查看 (V) 收藏 灾 (A) 工具 (T) 帮助 (H) 








</BODY> 
</HTML> 


程序 运行 结果 如 图 20-9 所 示 。 


20.4.2 ”案例 5 一 一 字符 串 运 算 符 


字符 串 运 算 符 是 把 两 个 字符 串 连接 起 来 变 成 一 个 字符 串 的 运算 符 。 使 用 “.” 来 完成 。 如 
果 变 量 是 整 型 或 浮 点 型 ，PHP 也 会 自动 把 它们 转换 为 字符 串 输出 。 
【 例 20.10】 字 符 串 运算 符 的 使 用 (实例 文件 : ch20\20.10.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<TITLE> 字 符 串 运算 符 </TITLE> 





图 20-9 例 20.9 的 程序 运行 结果 


二 
信和 36 


“U 

















第 
</HEAD> S 
<BODY> ER | 
<?2php | 由 -| 加 epocalhe.. P - 上 | @ RE 早 

下 We 文件 (F| 半 短 (5] 全 者 (V】 笋 窟 天 |A) 工 县 [T) 考 即 [H) 三 
到 sedi 把 丙 个 字符 由 连接 起 来 ，10.25 天 。 动 
echo $a." 连 接 起 来 ，" .$b." 天 。"; 前 
?> 开 
</BODY> 发 
</HTML> 语 
程序 运行 结果 如 图 20-10 所 示 。 20-10 例 20.10 的 程序 运行 结果 其 
20.4.3 ”案例 6 一 一 赋值 运算 符 认 
I 
赋值 运算 符 的 作用 是 把 一 定 的 数据 值 加 载 给 特定 变量 。 赋 值 运算 符 的 具体 含义 如 表 20-2 时 
所 示 。 语 


例如 ，$a-=$b 等 价 于 $a=$a-$b， 其 他 赋值 运算 符 与 之 类 似 。 由 此 可 以 看 出 ， 赋 值 运 算 符 
可 以 使 程序 更 加 简练 ， 从 而 提高 执行 效率 。 











表 20-2 赋值 运算 符 
运算 符 名 称 
= 将 右边 的 值 赋值 给 左边 的 变量 
二 将 左边 的 值 加 上 右边 的 值 赋 给 左边 的 变量 
-= 将 左边 的 值 减 去 右边 的 值 赋 给 左边 的 变量 
*= 将 左边 的 值 乘 以 右边 的 值 赋 给 左边 的 变量 
大 将 左边 的 值 除 以 右边 的 值 赋 给 左边 的 变量 
二 将 左边 的 字符 串 连 接 到 右边 
%= 将 左边 的 值 对 右边 的 值 取 余数 赋 给 左边 的 变量 


20.4.4 ”案例 7 一 一 比较 运算 符 
比较 运算 符 用 来 比较 其 两 端 数据 值 的 大 小 。 比 较 运算 符 的 具体 含义 如 表 20-3 所 示 。 
表 20-3 ”比较 运算 符 





相等 

不 相等 
大 于 
小 于 

大 于 等 于 
小 于 等 于 














. 
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续 表 
运算 符 
精确 等 于 (类 型 ) 
不 精确 等 于 


其 中 ，=== 和 !== 需 要 特别 注意 。$b=-==S$c 表示 $b 和 Sc 不 只 是 数值 上 相等 ， 而 且 两 者 的 类 
型 也 一 样 ，$b! 一 $c 表示 $b 和 $c 有 可 能 是 数值 不 等 ， 也 可 能 是 类 型 不 同 。 
【 例 20.11】 比 较 运 算 符 的 使 用 (实例 文件 为 ch20\20.11.php)。 代 码 如 下 : 


<HTML> 

<HEAD> 
<TITLE> 使 用 比较 运算 符 </TITLE> 

</HEAD> 

<BODY> 

3 

$value="15"; 

echo "\$value = \"$value\""; 

echo "$value==15: "; 













var_dump ($value==15); // 结 果 为 :bool (true) 
echo "\$value==true: "7 

var_dump ($value==true); // 结 果 为 :bool (true) 
echo "\$value!=null: "7 

var_ dump ($value!=null); // 结 果 为 :bool (true) 
echo "\$value==false: "; 

var_dump ($value: // 结 果 为 :bool (false) 
echo "\$value =: 

var_dump ($value: // 结 果 为 :bool (false) 
echo "\$value: 

// 结 果 为 :bool (true) 
var_dump (10/2.0 !==5); // 结 果 为 :bool (true) 
县 六 
</BODY> 
<HTML> 
程序 运行 结果 如 图 20-11 所 示 。 

0 x 





focahow1? 了 了- © | ©@ LinERS 
|_ XH NEE SV KEAN IAN 8 











20-11 例 20.11 的 程序 运行 结果 


刘 

















第 
20.4.5 “案例 8 一 一 递增 递减 运算 符 和 
动 

PHP 支持 C 风格 的 前 /后 递增 与 递减 运算 符 ， 北 增 /递减 运算 符 不 影响 布尔 值 。 北 减 NULL 四 
值 没有 效果 ， 但 是 递增 NULL 值 的 结果 是 1。 递 增 递减 运 算 符 的 具体 含义 如 表 20-4 所 示 。 站 
表 20-4 ”递增 递 戒 运算 符 a 

描 述 量 

i sx 加 一 递增 ， 然 后 返回 Sx 于 
S$x++ 返回 Sx， 然 后 $x 加 一 递增 
前 递减 S$x 减 一 递减 ， 然 后 返回 Sx 涡 

| 后 递 碱 。 ”| 返回 sx， 然 后 sx 减 一 北城 二 

语 


20.4.6 ”案例 9 一 一 数组 运算 符 


PHP 数组 运算 符 用 于 比较 数组 。 数 组 运算 符 的 具体 含义 如 表 20-5 所 示 。 
表 20-5 数组 运算 符 


不 全 等 | $x!--$y | 如 果 Sx 与 sy 完全 不 同 ， 则 返回 tue 





20.4.7 案例 10 一 一 逻辑 运算 符 


一 个 编程 语言 最 重要 的 功能 之 一 就 是 要 进行 逻辑 判断 和 运算 。 比 如 逻辑 和 、 人 逻辑 或 、 逻 
辑 否 都 是 由 这 些 逻 辑 运算 符 控 制 的 。 逻 辑 运 算 符 的 含义 如 表 20-6 所 示 。 


表 20-6 ”逻辑 运算 符 
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20.5 ”PHP 中 常用 的 控制 语句 


PHP 中 的 控制 语句 主要 包括 条 件 语 句 、 循 环 语句 等 ， 其 中 条 件 控制 语句 又 可 以 分 为 多 种 
条 件 语句 ， 如 站 语句 、switch 语句 等 ;循环 语句 包括 while 循环 、do...while 循环 和 for 循 
环 等 。 


20.5.1 案例 11 一 一 if 语句 
站 语句 是 最 为 常见 的 条 件 控制 语句 。 它 的 语法 格式 如 下 : 


if (条 件 判断 语句 ) { 
命令 执行 语句 ; 





这 种 形式 只 是 对 一 个 条 件 进行 判断 。 如 果 条 件 成 立 ， 则 执行 命令 语句 ， 否 则 不 执行 。 
【 例 20.12】 站 语句 的 使 用 (实例 文件 为 ch20\20.12.php)。 代 码 如 下 : 

<HTML> 

<HEAD> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>if 语句 的 使 用 </TITLE> 


</HEAD> 
<BODY> 
<?php 
$num = rand(1,100); // 使 用 rand () 函数 生成 一 个 随机 数 
if (Snums 2 != 0)1{ // 判 断 变量 snum 是 否 为 奇数 
echo "\$num = $num"; // 如 果 为 奇数 ， 输 出 表达 式 和 说 明文 字 
echo "<br>$num 是 奇数 。"; 
?> 
</BODY> 
</HTML> 


运行 后 刷新 页 面 ， 结 果 如 图 20-12 所 示 。 
20.5.2 ”案例 12 一 一 if...else 语句 





- OO x 
加 -|@ hupy/localho.. ”0 | 四 if 证 问 的 使 用 
文件 (D。 交 强 (可 看 (V) 。 收 戈 实 (A) 工具 (T) 帮助 (H) 




















于 
如 果 是 非 此 即 彼 的 条 件 判 断 ， 可 以 使 用 if...else 
语句 。 它 的 语法 格式 如 下 : 
if (条 件 判断 语句 ) { 图 20-12 例 20.12 运行 
命令 执行 语句 A; 图 例 的 程序 运行 结果 
}elsef{ 
命令 执行 语句 B; 


这 种 结构 形式 首先 判断 条 件 是 否 为 真 ， 如 果 为 真 ， 则 执行 命令 语句 A， 否 则 执行 命令 语 
句 B。 


台 


【 例 20.13】if...else 语句 的 使 用 (实例 文件 为 ch20\20.13.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>if..else 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$d=date ("D"); 
if ($d=="Fri") 
echo "今天 是 周 五 哦 !"; 
else 
echo "可 惜 今天 不 是 周 五 !"; 
人 
</BODY> 
</HTML> 


程序 运行 结果 如 图 20-13 所 示 。 Sr 
@-e httpy/localho.. ”CC | 轩 if.else 语 句 的 使 用 


© 
sd if1 五 忻 (月 六 颖 (E) 查看 (V) ”收藏 只 (A) 工具 (T) 帮助 (H) 
20.5.3 ”案例 13 一 一 else if 语句 2 


De 
2 


汪洋 一 一 吝 洒 中 刷 淖 六 二 习 讲 时 起 oz 沿用 





中 玉 dHd 


AG 

















在 条 件 控制 结构 中 ， 有 时 会 出 现 多 于 两 种 
的 选择 ， 此 时 可 以 使 用 else if 语句 。 它 的 语法 
格式 如 下 : 图 20-13” 例 20.13 的 程序 运行 结果 


if (条 件 判 断 语 句 ) { 
命令 执行 语句 ; 
}else if (条 件 判断 语句 ) { 
命令 执行 语句 ; 





【 例 20.14】else 让 语句 的 使 用 (实例 文件 为 ch20\20.14.php)。 代 码 如 下 : 


<HTML> 

<HEAD> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>else if 语句 的 使 用 </TITLE> 


</HEAD> 
<BODY> 
<?php 
$score = 857 // 设 置 成 绩 变量 $score 
if ($score >= 0 and $score <= 60){ // 判 断 成 绩 变量 是 否 在 0 一 60 之 间 
echo "您 的 成 绩 为 差 " // 如 果 是 ， 说 明成 绩 为 差 
jelse if($score > 60 and $score <= 80){ // 否 则 判断 成 绩 变量 是 否 在 61 一 80 之 间 
echo "您 的 成 绩 为 中 等 "; // 如 果 是 ， 说 明成 绩 为 中 等 
jelset // 如 果 两 个 判断 都 是 false， 则 输出 默认 值 
echo "您 的 成 绩 为 优等 "; // 说 明成 绩 为 优等 


} 
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2 
</BODY> 
</HTML> 


程序 运行 结果 如 图 20-14 所 示 。 
20.5.4 ”案例 14 一 一 switch 语句 
switch 语句 的 结构 是 给 出 不 同情 况 下 可 能 执行 


的 程序 块 ， 条 件 满足 哪个 程序 块 ， 就 执行 哪个 。 它 
的 语法 格式 为 : 图 20-14” 例 20.14 的 程序 运行 结果 





i 娄 
轩 -|@ hpy/ocalho.. P - 0 | @ clse 请问 的 合用 
文件 (F) 篇 弓 (E) ”可 看 (V， 收藏 夫 (A) ”工具 (T) 帮助 (H) 
您 的 成 缚 为 优等 | 























switch (条 件 判 断 语 句 ) { 
case 可 能 判断 结果 a: 
命令 执行 语句 ; 
break; 
case 可 能 判断 结果 b: 
命令 执行 语句 ; 


break; 


Ce 
命令 执行 语句 ; 
} 
其 中 ， 若 “条 件 判断 语句 ”的 结果 符合 哪个 “可 能 判断 结果 ”， 就 执行 其 对 应 的 “命令 
执行 语句 ”。 如 果 都 不 符合 ， 则 执行 default 对 应 的 默认 项 “命令 执行 语句 ”。 
【 例 20.15】switch 语句 的 使 用 (实例 文件 为 ch20\20.15.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>switch 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
Sx=57 
Switch ($x) 
{ 
case 1: 
echo "数值 为 El 
break; 
Case 2: 
echo "数值 为 2"; 
break; 
case 3: 
echo "数值 为 3"; 
break; 
case 4: 
echo "数值 为 4"; 
break; 
Case 3: 


echo "数值 为 5"; 


舍 44 


























本 
秆 
break; 一 OO x S 
default: [ 画 -@ repyocalho. P ~ Switch 章 
echo "数值 不 在 1 到 5 之 间 "; 9 ee i Sn RE 几 
} 数值 为 5 列 
2 
</BODY> 品 
</HTML> 开 
发 
程序 运行 结果 如 图 20-15 所 示 。 20-15 ” 例 20.15 的 程序 运行 结果 语 
: 基 
20.5.5 “案例 15 一 一 while 循环 语句 而 
while 循环 的 语法 格式 如 下 : 六 
while (条 件 判断 语句 ) { 卫 
命令 执行 语句 ; 二 
} 语 


其 中 当 “ 条 件 判 断 语句 ”为 tue 时 ， 执 行 后 面 的 “命令 执行 语句 ”， 然 后 返回 到 条 件 表 
达 式 继续 进行 判断 ， 直 到 表达 式 的 值 为 假 ， 才 能 跳出 循环 ， 执 行 后 面 的 语句 。 
【 例 20.16】while 语句 的 使 用 (实例 文件 为 ch20\20.16.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>while 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
Snum = 1; 
$str = "20 以 内 的 奇数 为 : "7 
while (S$num <=20){ 
if(Snum % 2!= 0){ 
$str .= $num." "7 


AG 





} 


$numt++; 

} 

echo $str; 
2 
</BODY> 
</HTML> 
程序 运行 结果 如 图 20-16 所 示 。 一 
本 实例 主要 实现 20 以 内 的 奇数 输出 。 从 1 一 20 @ [|® rep/ocaho.. P - © | @ while 

依次 判断 是 否 为 奇数 ， 如 果 是 ， 则 输出 ;如果 不 ETA 


是 ， 则 继续 下 一 次 的 循环 。 20 以 内 的 奇数 为 , 1 3 5 7 9 11 13 15 17 19 ] 
20.5.6 ”案例 16 一 一 do...while 循环 语句 
do...while 循环 的 语法 格式 如 下 : 




















20-16 例 20.16 的 程序 运行 结果 


. 
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dof{ 
命令 执行 语句 ; 

Jwhile (条 件 判断 语句 ) 

其 中 先 执行 do 后 面 的 “命令 执行 语句 ”， 其 中 的 变量 会 随 着 命令 的 执行 发 生变 化 。 当 此 
变量 通过 while 后 的 “条 件 判断 语句 ”判断 为 false 时 ， 停 止 执行 “命令 执行 语句 ”。 

【 例 20.17】do...while 语句 的 使 用 (实例 文件 为 ch20\20.17.php)。 代 码 如 下 : 

<HTML> 

<HEAD> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>do.-while 语句 的 使 用 </TITLE> 





</HEAD> 
<BODY> 
<?php 
$aa = 0; // 声 明 一 个 整数 变量 $aa 
while($aa != 0){ // 使 用 while 循环 输出 
echo "不 会 被 执行 的 内 容 "; // 这 人 句 话 不 会 被 输出 
} 
dof // 使 用 do..while 循环 输出 
echo "被 执行 的 内 容 "; // 这 句 话 会 被 输出 
}while($aa != 0); 
?> 
</BODY> 
</HTML> 


程序 运行 结果 如 图 20-17 所 示 。 从 结果 可 以 看 
出 ，while 语句 和 do...while 语句 有 很 大 的 区 别 。 





二 口 x 
@ [| 男 -|@ rapyfiocalho- 记 - | 加 do we 请 昌 的 代用 
文件 (F) 篇 句 (E) 。 坦 看 (V) 收藏 天 (A) 工具 (T) 帮助 (H) 




















20.5.7 ”案例 17 一 一 for 循环 语句 被 扫 和 的 内 容 
for 循环 的 语法 格式 如 下 : 
for (exprl;expr2;expr3) 图 20-17 例 20.17 的 程序 运行 结果 
{ 
执行 命令 语句 ; 
} 


其 中 exprl 为 条 件 的 初始 值 ，expr2 为 判断 的 最 终 值 ， 通 常 都 是 用 比较 表达 式 或 逻辑 表达 
式 充当 判断 的 条 件 ， 执 行 完 命令 语句 后 ， 青 执行 expr3。 
【 例 20.18】for 循环 语句 的 使 用 (实例 文件 为 ch20\20.18.php)。 代 码 如 下 : 


<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE> for 循环 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
for ($i=0;$i<4;$i++) { 





echo "for 语句 的 功能 非常 强大 <br>"; 
} 


?> 





回 - @ hapy/localho- DD -0 | 全 for 在 环 语 问 的 使 用 


- OO x 
文件 [F) ”篇 各 (E) 前 看 (V) 收藏 夫 (A) 工具 (T) 才 助 (H) 














or 语句 的 功能 非常 强大 
</Bopy> 语句 的 功能 非常 强 大 
</HTML> for 语句 的 功能 非常 强大 
for 语句 的 功能 非常 强大 
程序 运行 结果 如 图 20-18 所 示 。 从 中 可 以 看 
出 ， 语 句 执行 了 4 次 。 20-18” 例 20.18 的 程序 运行 结果 


便 导 砷 斑 涉 沁 革 习 二 起” 册 0Z 波 量 


20.6 PHP 函数 概述 


函数 的 英文 为 fpnction， 这 个 词 也 有 功能 的 意思 。 顾 名 思 义 ， 使 用 函数 就 是 要 在 编程 过 程 
中 实现 一 定 的 功能 ， 也 即 通过 一 定 的 代码 块 来 实现 一 定 的 功能 。 比 如 ， 通 过 一 定 的 功能 记录 
下 酒店 客人 的 个 人 信息 ， 每 到 他 生日 的 时 候 自 动 给 他 发 送 视 贺 E-mail。 并 且 这 个 发 信 功 能 可 
以 重用 ， 可 以 改 在 某 个 客户 的 结婚 纪念 日 时 给 他 发 送 视 福 E-mail。 因 此， 函数 就 是 实现 一 定 
功能 的 一 段 特定 的 代码 。 


20.6.1 案例 18 一 一 定义 和 调用 函数 


其 实在 前 面 的 实例 中 早已 用 过 函数 。define0 函 数 就 是 定义 一 个 常量 。 如 果 现 在 再 写 一 个 
程序 ， 则 同样 可 以 调用 define0 函 数 。 
其 实 ， 更 多 的 情况 下 ， 程 序 员 面 对 的 是 自 定义 函数 。 其 语法 格式 如 下 : 


function name of function( param]l,param2,... ){ 
statement 





中 洒 dHd 范 丑 





} 

其 中 name_of function 是 函数 名 ，paraml1、param2 是 参数 ，statement 是 函数 的 具体 
内 容 。 

下 面 以 自 定 和 调用 函数 为 例 进 行 讲解 。 

【 例 20.19】 自 定 和 调用 函数 (实例 文件 为 ch20\20.19.php)。 代 码 如 下 : 

<HTML> 


<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE> 自 定 和 调用 函数 </TITLE> 
</HEAD> 
<BODY> 
<?php 

function sayhello($customer){ 

return $customer."。 儿 村 四 月 闲人 少 , 才 了 蚕桑 又 插 田 。"; 
上 
echo sayhello(' 绿 人 遍 山 原 白 满 川 ， 子 规 声 里 雨 如 烟 ' ) ; 


程序 运行 结果 如 图 20-19 所 示 。 
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[@@- © rp//ocalho.. P - © | @ ennaer 
文件 (月 ” 妨 强 (E) 。 音 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
[ee™ 子规 声 里 雨 如 烟 。 乡 村 四 月 闲人 少 ， 才 了 等 桑 又 插 田 。 














图 20-19 例 20.19 的 程序 运行 结果 


20.6.2 ”案例 19 一 一 向 函数 传递 参数 数值 


由 于 函数 是 一 段 封闭 的 程序 ， 很 多 时 候 ， 程 序 员 都 需要 向 函数 内 传递 一 些 数据 ， 来 进行 
操作 。 
语法 格式 如 下 : 


function 函数 名 称 (参数 1, 参数 2) { 
算法 描述 , 其 中 使 用 参数 1 和 参数 2; 








下 面 以 酒店 房间 住宿 费 总 价 为 例 进行 讲解 。 
【 例 20.20】 向 函数 传递 参数 数值 (实例 文件 为 ch20\20.20.php)。 代 码 如 下 : 


<HTML> 
<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" 
Wi 
<TITLE> 向 函数 传递 参数 数值 </TITLE> 
</HEAD> 
<BODY> 
<?php 
function totalneedtopay ($days, $roomprice){ 
$totalcost = $days*$roomprice; 
"需要 支付 的 总 价 : $totalcost"." 元 。"; 
} 
$rentdays = 3; 
$roomprice = 168; 
totalneedtopay ($rentdays, $roomprice); 
totalneedtopay (5,198); 


</BODY> 

</HTML> 

程序 运行 结果 如 图 20-20 所 示 。 rp 0 x 
提 [由 -四 Pipealho- D+ © @ maissrw x | 





| 又 御 F) 堪 入 (昌吉 大 (V) 收藏 (A) 工具 (1 才 切 (H) 


20.6.3 案例 20 一 一 向 函数 传递 参数 需要 支付 的 总 价 ，504 元 。 需 要 支付 的 总 价 ，990 元 . 
引用 


向 函数 传递 参数 引用 ， 其 实 就 是 向 函数 传递 
变量 引用 。 参 数 引 用 一 定 是 变量 引用 ， 静 态 数值 
是 没有 引用 一 说 的 。 由 于 在 变量 引用 中 已 经 知 
道 ， 变 量 引用 其 实 就 是 对 变量 名 的 引用 ， 是 对 特 








图 20-20 例 20.20 的 程序 运行 结果 


定 的 一 个 变量 位 置 的 引用 。 


下 面 以 酒店 服务 费 总 价 为 例 进 行 讲 解 。 


【 例 20.21】 向 函数 传递 参数 引用 (实例 文件 为 ch20\20.21.php)。 代 码 如 下 : 


<HTML> 


<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


</HEAD> 
<BODY> 
<?php 
$fee = 300; 
$serviceprice = 50; 
function totalfee(&$fee,$serviceprice){ 
$fee = $feet$serviceprice; 
echo "需要 支付 的 总 价 : $fee" ." 元 。"; 
} 
totalfee ($fee, $serviceprice); 
totalfee ($fee, $serviceprice); 


程序 运行 结果 如 图 20-21 所 示 。 


20.6.4 ”案例 21 一 一 从 函数 中 返回 值 


在 以 上 的 一 些 例子 中 ， 都 是 把 函数 运算 完成 的 


值 直接 打印 出 来 。 但 是 ， 很 多 情况 下 ， 程 序 并 不 需 
要 直接 把 结果 打印 出 来 ， 而 是 仅仅 给 出 结果 ， 并 且 
把 结果 传递 给 调用 这 个 函数 的 程序 ， 为 其 所 用 。 








- Oo 
因 -|@@ hp//ocalho.. P ~ © | @ localhost 


文件 (月 句 强 (E) 前 看 (V) ”收藏 失 (A) 工具 [T) 帮助 (H) 














需要 支付 的 总 价 :350 元 。 需 要 支付 的 总 价 :400 元 。 


图 20-21 例 20.21 的 程序 运行 结果 


这 里 需要 使 用 到 retum 关键 字 。 下 面 以 综合 酒店 客房 价格 和 服务 价格 为 例 进行 讲解 。 
【 例 20.22】 从 函数 中 返回 值 (实例 文件 为 ch2020.22.php)。 代 码 如 下 : 


<HTML> 


<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


</HEAD> 
<BODY> 
<?php 


function totalneedtopay ($days, $roomprice){ 


return $days*$roomprice; 
， 
Srentdays = 3; 
$roomprice = 168; 


echo totalneedtopay ($rentdays, $roomprice); 


</BODY> 
</HTML> 


程序 运行 结果 如 图 20-22 所 示 。 
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口 Xx 


@ 加 - @ hp//ocalho.. DP - © | @ localhost 


20.6.5 ”案例 22 一 一 对 函数 的 引用 
文件 (F) ”篇 驾 (E) 。 坦 看 (V) 收 营 夫 (A) 工具 (T) 帮助 (H) 
不 管 是 PHP 中 的 内 置 函数 ， 还 是 程序 员 在 程 。 | 

















序 中 的 自 定义 函数 ， 都 可 以 直接 简单 地 通过 函数 名 
调用 。 但 是 在 操作 过 程 中 也 有 些 不 同 ， 大 致 分 为 以 





下 3 种 情况 。 图 20-22 例 20.22 的 程序 运行 结果 
(1) 如 果 是 PHP 的 内 置 函数 ， 如 date0， 可 以 
直接 调用 。 


(2) 如 果 这 个 函数 是 PHP 的 某 个 库 文 件 中 的 函数 ， 则 需要 用 include0) 或 require0 函 数 把 
此 库 文件 加 载 ， 然 后 才能 使 用 。 

(3) 如 果 是 自 定义 函数 ， 若 与 引用 程序 同 在 一 个 文件 中 ， 则 可 直接 引用 。 如 果 此 函数 不 
在 当前 文件 内 ， 则 需要 用 include0) 或 requireO 函 数 加 载 。 

对 函数 的 引用 ， 实 质 上 是 对 函数 返回 值 的 引用 。 

【 例 20.23】 对 函数 的 引用 (实例 文件 为 ch20\20.23.php)。 代 码 如 下 : 


<HTML> 

<HEAD> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE> 对 函数 的 引用 </TITLE> 


</HEAD> 

<BODY> 

<?php 

function g&example ($aa=1){ // 定 义 一 个 函数 ， 别 忘 了 加 & 符 号 
return $aa; // 返 回 参 数 $str 


; 

$bb= &example ("请 君 试问 东 流水 ， 别 意 与 之 谁 短 长 ?") ; ”// 声 明 一 个 函数 的 引用 $str1l 
echo $bb."<p>"; 

?> 

</BODY> 

</HTML> 


程序 运行 结果 如 图 20-23 所 示 。 
20.6.6 ”案例 23 一 一 对 函数 取消 引用 


对 于 不 需要 引用 的 函数 ， 可 以 做 取消 操作 。 取 
消 引用 函数 使 用 unsetO 函 数 来 完成 ， 目 的 是 断 开 变 
量 名 和 变量 内 容 之 间 的 绑 定 ， 但 此 时 并 没有 销毁 变 图 20-23” 例 20.23 的 程序 运行 结果 
量 内 容 。 

【 例 20.24】 对 函数 取消 引用 (实例 文件 为 ch20\20.24.php)。 代 码 如 下 : 


<HTML> 

<HEAD> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE> 对 函数 取消 引用 </TITLE> 

</HEAD> 





= DO % 
[加 -1@ np//ocalho.. P - © | @ Hara 
文件 (F) ” 忽 纺 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 者 助 (H) 
请 君 试问 东 流 水 ， 别 意 与 之 谁 短 长 ? 人 ~ 
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<BODY> D 
<2php a 
Snum = 166; // 声 明 一 个 整 型 变量 四 
Smath = &$num; // 声 明 一 个 对 变量 snum 的 引用 $math 动 
echo "\$math is: ".$math."<br>"; // 输 出 引用 $math 六 
unset (Smath) ; // 取 消 引用 $math 站 
echo "\$math is: ".$math."<br>"; // 再 次 输出 引用 开 
echo "\$num is: ".$num; // 输 出 原 变 量 - 
> 和 
</BODY> 基 
</HTML> 础 
程序 运行 结果 如 图 20-24 所 示 。 认 
识 
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文件 (和 编 名 (E) ”二 看 (V) 收 训 夫 (A) 工具 [D。 帮助 (H) 语 

Smath is: 166 言 
Smath is: 


Snum is: 166 


AG 








图 20-24 例 20.24 的 程序 运行 结果 


20.7 ”综合 案例 一 一 创建 酒店 系统 在 线 订房 表 


本 案例 主要 创建 酒店 系统 的 在 线 订房 表 ， 其 中 需要 创建 两 个 PHP 文件 。 具 体 创建 步 又 
如 下 。 
EE 在 网 站 主 目录 下 建立 文件 formstringhandler php。 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<HTML xmlns="http://www.w3.0rg/1999/xhtml"> 
<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
您 的 订房 信息 : </HEAD> 
<BODY> 
<?php 
$DOCUMENT ROOT = $_ SERVER['"'DOCUMENT ROOT']; 
$customername = trim($ POST['customername']); 
$gender = $_ POST['gender']; 
$arrivaltime = $ POST['arrivaltime']; 
$phone trim($ POST['phone']); 
$email trim($ POST['email']); 
$info = trim($ POST['info']); 
if(!eregi('^[a-zA-20-9 \-\.]+@[a-zA-Z20-9\-]+\. [a-zA-20-9 \-\.]+ 
$',$email)){ 
echo "这 不 是 一 个 有 效 的 email 地 址 ， 请 返回 上 页 且 重 试 "; 
exit; 
} 
if(!eregi('^[0-9]$',$phone) and strlen($phone)<= 4 or strlen($phone)>= 
15){ 
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echo "这 不 是 一 个 有 效 的 电话 号 码 ， 请 返回 上 页 且 重 试 "; 


exits; 
} 
if( $gender == "m"){ 
$customer = "先生 "; 
}else{ 


$customer = "女士 "7 
} 
echo '<p> 您 的 订房 信息 已 经 上 传 ， 我 们 正在 为 您 准备 房间 。 确认 您 的 订房 信息 如 下 :</p>'; 
echo $customername."\t".$customer.' 将 会 在 '.S$arrivaltime.' 天 后 到 达 。 您 的 电话 
为 ' .$phone ."。 我 们 将 会 发 送 一 封 电子 邮件 到 您 的 email 邮箱 : " .$email."。<br /><br /> 另 
外 ， 我 们 已 经 确认 了 您 其 他 的 要 求 如 下 : <br /><br />"; 
echo nl2br ($info); 
echo "<p> 您 的 订房 时 间 为 :" .date('Y m d H: i: s')."</p>"; 
全 
</BODY> 
</HTML> 


ET 在 网 站 主 目录 下 建立 文件 form4string html。 代 码 如 下 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<HTML xmlns="http://www.w3.o0rg/1999/xhtml"> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<h2>GoodHome 在 线 订房 表 。</h2> 
</HEAD> 
<BODY> 
<form action="formstringhandler.php" method="post"> 
<table> 
<tr bgcolor="#3399FF" > 
<td> 客 户 姓名 : </td> 
<td><input type="text" name="customername" size="20" /></td> 
</Er> 
<tr bgcolor="#CCCCCC" > 
<td> 客 户 性 别 : </td> 
<td> 
<select name="gender"> 
<option value="m"> 男 </option> 
<option value="f"> 女 </option> 
</select> 
</td> 
</Er> 
<tr bgcolor="#3399FF" > 
<td> 到 达 时 间 :</td> 
<td> 
<select name="arrivaltime"> 
<option value="1"> 一 天 后 </option> 
<option value="2"> 两 天 后 </option> 
<option value="3"> 三 天 后 </option> 
<option value="4"> 四 天 后 </option> 
<option value="5"> 五 天 后 </option> 
</select> 
</td> 


EE 
<tr bgcolor="#CCCCCC" > 
<td> 电 话 :</td> 
<td><input type="text" name="phone" size="20" /></td> 
</tr> 
<tr bgcolor="#3399FF" > 
<td>email:</td> 
<td><input type="text" name="email" size="30" /></td> 
/EE> 
<tr bgcolor="#CCCCCC" > 
<tq> 其 他 需求 :</td> 
<td> <textarea name="info" rows="10" cols="30"> 如 果 您 有 什么 其 他 要 求 ， 请 
填 在 这 里 。</textarea> 
</td> 
</tr> 
<tr bgcolor="#666666" > 
<td align="center"><input type="submit" value=" 确 认 订 房 信 息 " /></td> 
i 
</table> 
</form> 
</BODY> 
</HTML> 


运行 form4string.html， 结 果 如 图 20-25 所 示 。 
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如 果 您 有 什么 其 他 要 求 ,请 
填 在 这 里 。 
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确认 订房 信息 








20-25 ”程序 运行 结果 


EC) 填写 表单 。【 客 户 姓名 】 为 “王小明 ”、【 客 户 性 别 】 为 “ 男 ”、【 到 达 时 
间 】 为 “三 天 后 ”、【 电 话 】 为 “13592XXXX77”、email 为 
“wangxiaoming@hotmail.com”、【 其 他 需求 】 为 “两 壶 开水 ，【Enter】 一 条 白 毛 
巾 ，【Enter】 一 个 冰激凌 ”。 单 击 【 确 认 订 房 信 息 】 按 钮 ， 浏 览 器 会 自动 跳 转 至 
formstringhandler.php 页 面 ， 显 示 结 果 如 图 20-26 所 示 。 
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Bes topochost P ~ SO x |S onon > 出 E 


MN PRD SEV RN) IAM we 
您 的 订房 信息 ， 
您 的 订房 信息 己 经 上 传 。 我 们 正在 为 您 准备 房间 。 确认 您 的 订 穷 信息 如 下 : 


玉 小 明 先生 将 会 在 3 天 后 到 你 的 电话 为 3592XXRT7。 我 们 将 会 卜 送 一 封 所 子 邮 件 到 您 
的 email 邮箱 ，vengxiaominglhormail com 











另外 ， 我 们 已 经 确认 了 你 其 他 的 1 
两 密 开 水 ，【Enter] 一 条 特 毛 巾 ， 【Enter] 一 个 滩 沼 前 
您 的 订房 时 间 为 :2014 04 19 03: 00: 54 








图 20-26 程序 运行 结果 

【代码 详解 】 

(1) “S$customername = trim($ POST['customername']); $phone = trim($ POSTI'phone")); 
Semail = trim($_POST['email]); $info = trim($_POST['info])” 都 是 通过 文本 输入 框 直接 输入 
的 。 所以， 为 了 保证 输入 字符 串 的 整洁 ， 以 方便 处 理 ， 则 需要 使 用 trim() 来 对 字符 串 的 前 后 的 
空格 进行 清除 。 另 外 ， 也 可 使 用 lrim0 清 除 左 边 的 空格 或 用 rtrim0 清 除 右边 的 空格 。 

(2) leregi(^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9_\-\.]+$',$email) 中 使 用 了 正则 表 
达 式 对 输入 的 email 文本 进行 判断 。 

(3) nl2br0 对 $info 变量 中 的 Enter 操作 ， 也 就 是 <br /> 操作 符 进行 了 处 理 。 在 有 新 行 
“ml” 操 作 的 地 方 生成 <br />。 

(4) 由 于 要 显示 中 文 ， 需 要 对 文字 编码 进行 设置 ，charset=gb2312， 就 是 简体 中 文 的 文字 
编码 。 


20.8 疑难 解 惑 


疑问 1: 如 何 合理 运用 include_once0 和 require_onceO? 


答 : include0 和 requireO 函 数 在 其 他 PHP 语句 执行 之 前 运行 ， 引 入 需要 的 语句 并 加 以 执 
行 。 但 是 每 次 运行 包含 此 语句 的 PHP 文件 时 ，include0 和 require0 函 数 都 要 运行 一 次 。 
include0 和 require0 函 数 如 果 在 先前 已 经 运行 过 ， 并 且 引 入 相同 的 文件 ， 则 系统 就 会 重复 引入 
这 个 文件 ， 从 而 产生 错误 。 而 include_once0 和 require_once0O 函 数 只 是 在 此 次 运行 的 过 程 中 引 
入 特定 的 文件 或 代码 ， 但 是 在 引入 之 前 ， 会 先 检查 所 需 文件 或 者 代码 是 否 已 经 引入 ， 如 果 引 
入 ， 将 不 再 重复 引入 ， 从 而 避免 造成 冲突 。 


疑问 2: 程序 检查 后 正确 ， 却 显示 Notice: Undefined variable， 为 什么 ? 


答 : PHP 默认 配置 会 报告 这 个 错误 ， 这 就 是 将 警告 在 页 面 上 打印 出 来 ， 虽 然 这 有 利于 暴 
露 问题 ， 但 现实 使 用 中 会 存在 很 多 问题 。 通 用 解决 办 法 是 修改 php.ini 的 配置 ， 需 要 修改 的 
参数 如 下 。 

(1) 找到 error_ reporting = 了 _ALL， 修 改 为 error_ reporting=E_ALL & ~E NOTICE。 

(2) 找到 register_globals = Of， 修 改 为 register_globals = On。 


第 21 章 
制作 动态 网 页 基础 


一 一 配置 动态 网 站 
运行 环境 


动态 网 站 是 目前 的 主流 网 站 类 型 ， 该 网 站 类 型 实现 了 人 机 交互 功能 。 不过， 在 
制作 动态 网 站 之 前 ， 必 须 先 构建 动态 网 站 的 执行 环境 。 本 章 主 要 介绍 如 何 构建 动态 
网 站 所 需 的 执行 环境 。 
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21.1 PHP 服务 器 概述 


在 学 习 PHP 服务 器 之 前 ， 读 者 需要 了 解 HTML 网 页 的 运行 原理 。 网 页 浏览 者 在 客户 端 通 
过 浏览 器 向 服务 器 发 出 页 面 请 求 ， 服 务 器 接收 到 请 求 后 将 页 面 返 回 到 客户 端的 浏览 器 ， 这 样 
网 页 浏览 者 即 可 看 到 页 面 显示 效果 。 

PHP 语言 在 Web 开发 中 作为 嵌入 式 语言 ， 需 要 嵌入 到 HTML 代码 中 执行 。 要 想 运 行 
PHP 网 站 ， 需 要 搭建 PHP 服务 器 。PHP 网 站 的 运行 原理 如 图 21-1 所 示 。 








图 21-1 PHP 网 站 运行 原理 


从 图 21-1 中 可 以 看 出 ，PHP 程序 运行 的 基本 流程 如 下 。 

(1) 网 页 浏览 者 首先 在 浏览 器 的 地 址 栏 中 输入 要 访问 的 主页 地 址 ， 按 Enter 键 触发 该 
申请 。 
(2) 浏览 器 将 申请 发 送 到 PHP 网 站 服务 器 。 网 站 服务 器 根据 申请 读 取 数据 库 中 的 页 面 。 
(3) 通过 Web 服务 器 向 客户 端 发 送 处 理 结果 ， 客 户 端的 浏览 器 显示 最 终 页 面 。 


由 于 在 客户 端 显示 的 只 是 服务 器 端 处 理 过 的 HTML 代码 页 面 ， 所 以 网 页 浏览 者 
外 看 不 到 PHP 代码 ， 这 样 可 以 提高 代码 的 安全 性 。 同 时 ， 在 客户 端 不 需要 配置 PHP 环 
境 ， 只 要 安装 浏览 器 即 可 。 


21.2 ”安装 PHP 前 的 准备 工作 


在 安装 PHP 之 前 ， 读 者 需要 了 解 安装 所 需要 的 软 硬 件 环境 和 获取 PHP 安装 资源 包 的 
途径 。 


21.2.1 ” 软 硬 件 环境 


大 部 分 软件 在 安装 的 过 程 中 都 需要 软 硬 件 环 境 的 支持 ， 当 然 PHP 也 不 例外 。 在 硬件 方 
面 ， 如 果 只 是 为 了 学 习 上 的 需求 ，PHP 只 需要 一 台 普 通 的 计算 机 即 可 。 在 软件 方面 需要 根据 
实际 工作 的 需求 选择 不 同 的 Web 服务 器 软件 。 

PHP 具有 跨 平台 特性 ， 所 以 PHP 开发 用 什么 样 的 系统 不 太 重 要 ， 开 发 出 来 的 程序 能 够 很 
轻松 地 移植 到 其 他 操作 系统 中 。 另 外 ，PHP 开发 平台 支持 目前 主流 的 操作 系统 ， 包 括 
Windows 系列 、Linux、UNIX 和 Mac OS X 等 。 本 书 以 Windows 平台 为 例 进行 讲解 。 


另外 ， 用 户 还 需要 安装 Web 服务 器 软件 。 目 前 ，PHP 支持 大 多 数 Web 服务 器 软件 ， 常 
见 的 有 IIS、Apache、PWS 等 。 比 较 流行 的 是 IS 和 Apache。 下 面 详细 讲述 这 两 种 Web 服务 
器 的 安装 和 配置 方法 。 


21.2.2 ”案例 1 一 一 获取 PHP 7.1 安装 资源 包 


PHP 安装 资源 包 中 包括 了 安装 和 配置 PHP 服务 器 的 所 需 文件 和 PHP 扩展 函数 库 。 获 取 
PHP 安装 资源 包 的 方法 比较 多 ， 很 多 网 站 都 提供 PHP 安装 包 ， 但 是 建议 读者 从 官方 网 站 下 
载 。 具 体操 作 步 又 如 下 。 

EEC 打开 正 浏览 器 ， 在 地 址 栏 中 输入 下 载 地 址 http://windows.php.net/download， 按 

Enter 键 确认 ， 登 录 到 PHP 下载 网 站 ， 如 图 21-2 所 示 。 





EECTTZTEIFTTRTE 
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can be found on the Wo. PHP 7.1(7.17) 则 





< > 
图 21-2 PHP 网 站 下 载 页 面 


EJ 进入 下 载 页 面 ， 单 击 Binaries and sources Releases 下 方 的 下 三 角 按钮 ， 在 打开 的 
下 拉 列 表 中 选择 合适 的 版 本 ， 这 里 选择 PHP 7.1 版 本 ， 如 图 21-3 所 示 。 





- 6 x 
@ OB mincews phpnetis: P ~ © | PHP For Windows: Bot xy ® 
文人 内 坊间， 豆 看 V| 履 盏 内。 工具 大 动 Hi 


PHP: Hypertext Preprocessor 





providing special builds for 
the Various Windows 
architactures. 


Tf you bke to bulld yoor own 











图 21-3 ”选择 需要 的 版 本 
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了 提示 在 图 21-3 中 ， 下 拉 列 表 中 的 VC11 代表 的 是 the Visual Studio 2112 compiler 编译 
六 器 编译 ， 通 常用 于 PHP+IIS 服务 器 下 。 要 求 用 户 安 装 Visual C++ Redistributable for 
Visual Studio 2112. 


EERS 显示 所 选 版 本 号 中 PHP 安装 包 的 各 种 格式 。 这 里 选择 Zip 压缩 格式 ， 单 击 Zip 
文字 链接 ， 如 图 21-4 所 示 。 


ECG 打开 【另存 为 】 对话 框 ， 选 择 保存 路 径 ， 然 后 保存 文件 即 可 ， 如 图 21-5 所 示 。 




















i 
EB 5 |B tor wa etx 六 全 儿 
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Sha256: 06014337075c0 M006di43206723020e60 A050bd010856l e5070 ep 可 
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图 21-4 选择 需要 版 本 的 格式 图 21-5 【另存 为 】 对 话 框 


21.3 ”PHP+IIS 服务 器 的 安装 配置 
下 面 介 绍 PHP +IIS 服务 器 架构 的 配置 方法 和 技巧 。 


21.3.1 案例 2 一 一 IIS 简介 及 其 安装 


IIS 是 Internet Information Services( 互 联网 信息 服务 ) 的 简称 ， 是 微软 公司 提供 的 基于 
Microsoft Windows 的 互联 网 基本 服务 。 由 于 它 功能 强大 、 操 作 简单 和 使 用 方便 ， 所 以 是 目前 
较为 流行 的 Web 服务 器 之 一 。 

目前 IS 只 能 运行 在 Windows 系列 的 操作 系统 上 。 针 对 不 同 的 操作 系统 ，IS 也 有 不 同 的 
版 本 。 下 面 以 Windows 10 为 例 进行 讲解 ， 默 认 情 况 下 此 操作 系统 没有 安装 IS 。 

安装 IIS 组 件 的 具体 操作 步骤 如 下 。 

TI 右 击 【 开 始 】 按 钮 ， 在 弹出 的 【开始 】 菜 单 中 选择 【控制 面板 】 命 令 ， 如 图 21-6 

所 示 。 
E73 打开 【控制 面板 】 窗 口 ， 单 击 【程序 】 选 项 ， 如 图 21-7 所 示 。 


EEJSp 打开 【程序 】 窗 口 ， 从 中 单 击 【启用 或 关闭 Windows 功能 】 文 字 链接 ， 如 图 21-8 
所 示 。 





EYY 在 打开 的 【Windows 功能 】 对 话 框 中 ， 选 中 Intemet Information Services 复 选 
框 ， 然 后 单 击 【 确 定 】 按 钮 ， 开 始 安装 ， 如 图 21-9 所 示 。 


- 456 
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ED 安装 完成 后 ， 即 可 测试 是 否 成 功 。 在 正 浏览 器 的 地 址 栏 中 输入 http://localhost/， 打 
开 IIS 的 欢迎 画面 页 面 ， 如 图 21-10 所 示 。 
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21.3.2 ”案例 3 一 一 PHP 的 安装 

IIS 安装 完成 后 ， 即 可 开始 安装 PHP。PHP 的 安装 过 程 大 致 分 成 3 个 步骤 。 

1. 解压 和 设置 安装 路 径 

将 获取 到 的 安装 资源 包 解压 缩 ， 解 压缩 后 得 到 的 文件 夹 中 放 着 PHP 所 需要 的 文件 。 将 文 
件 夹 复制 到 PHP 的 安装 目录 中 。PHP 的 安装 路 径 可 以 根据 需要 进行 设置 。 例 如 ， 本 书 设置 为 
D:PHP 和 ， 文 件 夹 复制 后 的 效果 如 图 21-11 所 示 。 
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图 21-11 PHP 的 安装 目录 


2. 配置 PHP 


在 安装 目录 中 ， 找 到 php.ini-development 文件 ， 此 文件 正 是 PHP 7.1 的 配置 文件 。 将 这 个 
文件 的 扩展 名 .ini-development 修改 为 ini， 然后 用 记事 本 打开 。 文 件 中 参数 很 多 ， 所 以 建议 读 


者 使 用 记事 本 的 查找 功能 ， 快 速 查找 需要 的 参数 。 
查找 并 修改 相应 的 参数 值 : extension_dir="D:\PHP7\ext"， 此 参数 为 PHP 扩展 函数 的 查找 


路 径 ， 其 中 DAPHP7\ 为 PHP 的 安装 路 径 ， 读 者 可 以 根据 自己 的 安装 路 径 进 行 修 改 。 采 用 同样 


的 方法 ， 修 改 参数 : cgi.force_redirect =0。 
另外 ， 去 除 下 面 的 参数 值 扩展 前 的 分 号 ， 最 终结 果 如 图 21-12 所 示 。 


iextension=php bz2.d1l 
?extension=php_curl.dll 
?extension=php fileinfo.dll 
?extension=php_gd2.d1l 
?extension=php gettext.d1ll 
iextension=php_gmp.d11l 
?extension=php_intl.dll 
?extension=php imap.dll 
iextension=php_ interbase.dll 
?extension=php_ ldap.dll 
?extension=php _ mbstring.dll 


例 458 


7extension=phP_exif-dl1 
?extension=php mysqli.d11 
iextension=php oci8 1l2c.dll 
?extension=php_openssl.dll 
?extension=php pdo firebird.d1ll 
?extension=php_pdo mysql.dll 
?extension=php pdo oci.dll 
?extension=php_ pdo odbc.dll 
?extension=php pdo pgsql.d1ll 
?extension=php pdo_ sqlite.dll 
?extension=php pgsql.d1ll 
?extension=php_shmop.dll 
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图 21-12 去 除 分 号 


3. 添加 系统 变量 


要 想 让 系统 运行 PHP 时 找到 上 面 的 安装 路 径 ， 就 需要 将 PHP 的 安装 目录 添加 到 系统 变量 
中 。 具 体操 作 步 又 如 下 。 
本 于 右 击 桌面 上 的 【此 电脑 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【属性 】 命 令 ， 打 开 
【系统 】 窗 口 ， 如 图 21-13 所 示 。 
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图 21-13 【系统 】 窗 口 
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ED 单 击 【 高 级 系统 设置 】 文 字 链 接 ， 打 开 【 系 统 属 性 】 对 话 框 ， 如 图 21-14 所 示 。 

EEC) 默认 显示 【高 级 】 选 项 卡 ， 在 该 选项 卡 中 单 击 【 环 境 变 量 】 按 钮 ， 打 开 【 环 境 
变量 】 对 话 框 。 在 【系统 变量 】 列 表 框 中 选择 变量 Path， 然 后 单 击 【编辑 】 按 钮 ， 
如 图 21-15 所 示 。 
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图 
21-14 【系统 属性 】 对 话 框 





图 21-15 【环境 变量 】 对 话 框 
EC 弹出 【编辑 系统 变量 】 对 话 框 ， 在 【变量 值 】 文 本 框 的 末尾 输入 “;d:\PHP5”， 
如 图 21-16 所 示 。 

















x 
变量 名 (N): Path 
变量 值 (V): n FilesNntel\WiFiNbinvCNProgram Files\Common Files\InteN\WirelessCommon\d:\PHP| 
浏览 目录 (D)… 浏览 文件 (月 … 














Ce ] w 
21-16 【编辑 系统 变量 】 对 话 框 


区 于 BY 单 击 【确定 】 按 钮 ， 返 回 到 【环境 变量 】 对 话 框 ， 依 次 单 击 【 确 定 】 按 钮 即 可 
关闭 对 话 框 ， 然 后 重新 启动 计算 机 。 这 样 设置 的 环境 变量 即 可 生效 。 


21.3.3 ”案例 4 一 一 设置 虚拟 目录 








如 果 用 户 是 按照 前 述 的 方式 来 启动 IS 网 站 服务 器 ， 那 么 整个 网 站 服务 器 的 根 目录 就 位 
“(系统 盘 符 ):\InetpubWwwwroot” 中 ， 也 就 是 如 果 要 添加 网 页 到 网 站 中 显示 ， 都 必须 放置 在 
这 个 目录 之 下 。 但 是 会 发 现 这 个 路 径 不 仅 太 长 ， 也 不 好 记 ， 使 用 起 来 相当 不 方便 。 

这 些 问 题 都 可 以 通过 修改 虚拟 目录 来 解决 。 具 体操 作 步 又 如 下 。 






EEC) 在 桌面 上 右 击 【此 电脑 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【管理 】 命 令 ， 打 开 全 
【计算 机 管理 】 窗 口 ， 在 左 侧 的 列表 框 中 展开 【服务 和 应 用 程序 】 选 项 ， 选 择 
【Intemet 信息 服务 (1S) 管理 器 】 选 项 ， 在 右 侧 选择 Default Web Site 选项 后 ， 右 击 
并 在 弹出 的 快捷 菜单 中 选择 【添加 虚拟 目录 】 命 令 ， 如 图 21-17 所 示 。 
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图 21-17 【计算 机 管理 】 窗 口 


EEIDy 打开 【添加 虚拟 目录 】 对 话 框 ， 在 【别名 】 文 本 框 中 输入 虚拟 网 站 的 名 称 ， 这 
里 输入 php7， 然 后 设置 物理 路 径 为 D:\php( 该 文件 夹 须 已 存在 )， 单 击 【 确 定 】 按 
钮 ， 如 图 21-18 所 示 。 


添加 在 拟 目 录 党 x 





网 站 和 名称: ”Default Web Site 
路 径 : 7 


(A): 
php7 
示 8t 觅 全 









































图 21-18 【添加 虚拟 目录 】 对 话 框 


至 此 ， 已 完成 了 IIS 网 站 服务 器 设置 的 更 改 ，IHS 网 站 服务 器 的 网 站 虚拟 目录 已 经 更 改 
为 D:\php 了 。 
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21.4 PHP+Apache 服务 器 的 环境 搭建 


Apache 支持 大 部 分 操作 系统 ， 搭 配 PHP 程序 的 应 用 ， 即 可 开发 出 功能 强大 的 互动 网 站 。 
下 面 主要 讲述 PHP+Apache 服务 器 的 搭建 方法 。 


21.4.1 Apache 简介 

















Apache 可 以 运行 在 几乎 所 有 的 计算 机 平台 上 。 由 于 其 跨 平台 和 安全 性 被 广泛 使 用 ， 是 目 
前 最 流行 的 Web 服务 器 端 软件 之 一 。 

和 一 般 的 Web 服务 器 相 比 ，Apache 的 主要 特点 如 下 。 

(1) 跨 平 台 应 用 。 几 乎 可 以 在 所 有 的 计算 机 平台 上 运行 。 

(2) 开放 源 代 码 。Apache 服务 程序 由 全 世界 的 众多 开发 者 共同 维护 ， 并 且 任 何人 都 可 以 
自由 使 用 ， 充 分 体现 了 开源 软件 的 精神 。 

(3) 支持 HITP 1.1 协议 。Apache 是 最 先 使 用 HITP 1.1 协议 的 Web 服务 器 之 一 ， 它 完 
兼容 HTTP 1.1 协议 并 与 HTTP 1.0 协议 向 后 兼容 。Apache 已 为 新 协议 所 提供 的 全 部 内 容 做 好 
了 必要 的 准备 。 

(4) 支持 通用 网 关 接 口 (CGI)。Apache 遵守 CGI 1.1 标准 并 且 提 供 了 扩充 的 特征 ， 如 定制 
环境 变量 和 很 难 在 其 他 Web 服务 器 中 找到 的 调试 支持 功能 。 

(5) 支持 常见 的 网 页 编程 语言 。 可 支持 的 网 页 编程 语言 包括 PERL、PHP、Python 和 Java 
等 ， 支 持 各 种 常用 的 Web 编程 语言 使 Apache 具有 更 广泛 的 应 用 领域 。 

(6) 模块 化 设计 。 通 过 标准 的 模块 实现 专 有 的 功能 ， 提 高 了 项 目 完成 的 效率 。 

(7) 运行 非常 稳定 ， 同 时 具备 效率 高 、 成 本 低 的 特点 ， 而 且 具 有 良好 的 安全 性 。 


21.4.2 ”案例 5 一 一 关闭 原 有 的 网 站 服务 器 


在 安装 Apache 网 站 服务 器 之 前 ， 如 果 所 使 用 的 操作 系统 已 经 安装 了 网 站 服务 器 ， 如 IIS 
网 站 服务 器 等 ， 用 户 必 须要 先 停止 这 些 服务 器 ， 才 能 正确 安装 Apache 网 站 服务 器 。 

以 Windows 10 操作 系统 为 例 ， 请 在 桌面 上 右 击 【 此 电脑 】 图 标 ， 在 弹出 的 快捷 菜单 中 
选择 【管理 】 命 令 ， 打 开 【 计 算 机 管理 】 窗 口 ， 在 左 侧 的 列表 框 中 展开 【服务 和 应 用 程序 】 
选项 ， 然 后 选择 【Intemet 信息 服务 (IS) 管 理 器 】 选 项 ， 在 右 侧 的 列表 框 中 单 击 【 停 止 】 文字 
链接 即 可 停止 IS 服务 器 ， 如 图 21-19 所 示 。 

如 此 一 来 ， 原 来 的 服务 器 软件 即 失 效 不 再 工作 ， 也 不 会 与 即将 安装 的 Apache 网 站 服务 
器 产生 冲突 。 当 然 ， 如 果 用 户 的 系统 原来 就 没有 安装 IS 等 服务 器 软件 ， 则 可 略 过 这 一 小 节 
的 步骤 直接 进行 服务 器 的 安装 。 
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图 21-19 停止 IIS 服务 器 


21.4.3 ”案例 6 一 一 安装 Apache 


Apache 是 免费 软件 ， 用 户 可 以 从 官方 网 站 直接 下 载 。Apache 的 官方 网 站 为 
http://www.apache.org。 

下 面 以 Apache 2.2 为 例 讲 解 如 何 安装 Apache。 有 具体 操作 步骤 如 下 。 

ED 双击 Apache 安装 程序 ， 打 开 安 装 向 导 欢 迎 界面 ， 单 击 Next 按钮 ， 如 图 21-20 
所 示 。 

ET 弹出 Apache 许可 协议 界面 ， 阅 读 完 后 ， 选 中 I accept the terms in the license 
agreement 单 选 按钮 ， 单 击 Next 按钮 ， 如 图 21-21 所 示 。 

ECDIS 阐 出 Apache 服务 器 注意 事项 界面 ， 阅 读 完 成 后 ， 单 击 Next 按钮 ， 如 图 21-22 











所 示 。 
手 Apache HTTP Server 2.2 - Installation Wizard x 震 Apache HTTP Server 2.2 - Installation Wizard x 
‘Welcome to the Installation Wizard for License Agreement 
Apache HTIP Server 2.2.25 Please read the folown'g hcense agreement carefuly. 
The Installation Wizard wl nstall Apache HTTP Server 2.2.25 rr 四 
on your computer To contnue, cick Next. ‘Vereen 20, Jomary 2084 
http:Mww.apache.org/licenses! 


|TERMS AND CONDMIONS FOR USE. REPRODUCTION AND DISTRIBUTION 


1. Definitions. 
ee Sly pment “License” shall mean the terms and conditions for use, reproduction, and 
ed distibution as defined by Sections 1 through 9 ofthis document 





laccept the tems n the icense agreement 
OL do not accept the terms n the icense agreement 














5 E33 rr er De 
图 21-20 ”欢迎 界面 图 21-21 Apache 许可 协议 界面 
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EC 弹出 服务 器 信息 设置 界面 ， 输 入 服务 器 的 一 些 基 本 信息 ， 分 别 为 Network 
Domain( 网 络 域名 )、Server Name( 服 务 器 名 )、Administrator's Email Address( 管 理 员 信 
箱 ) 和 Apache 的 工作 方式 。 如 果 只 是 在 本 地 计算 机 上 使 用 Apache， 前 两 项 可 以 输入 
localhost。 工 作 方式 建议 选择 第 一 项 : 针对 所 有 用 户 ， 工 作 端口 为 80， 当 机 器 启动 

时 自动 启动 Apache。 单 击 Next 按钮 ， 如 图 21-23 所 示 。 
期 Apache HTTP Server 22 - Installation Wizard X | | 一 wpsdeHTpSever22-ealaionWaard x 


Read This First Server Information 
Read this Before Running Apache on Windows. Please enter rou servers nformabon. 

















Apache HTTP Server ~ Network Doman (e.g. somenet.com) 








lwhatis it? 

[The Apache HTTP Server is a powerful and flexible HTTP/1.1 compliant wed server 
Originally designed as a replacement for the NCSA HTTP Server, thas grown to be 
Ithe most popular web server on the Interet. As a project of the Apache Sofware 
Foundation. the developers aim to collaboratvely develop and maintain arobust Admmatrators Emal Address (e.g. webmaster @somenet.com): 
commercial-grade, standards-based server with freely available source code 2 


Serve Nome eg ww somenet.com): 
hocahost 





|Ihe Latest Version 

Detalls of the latest version can be found on the Apache HTTP server project page nstal Apache HTTP Server 2.2 programs and shorteuts for: 

1 © for Al Users, on Port 80, msa Service ~Recommended. 
on for the Current User, on Port 8080, when started Manualy, 











tnstalsheld 时 | = = = 
图 21-22 Apache 服务 器 注意 事项 界面 图 21-23 ”服务 器 信息 设置 界面 


EED) 弹出 安装 类 型 界面 ， 其 中 Typical 为 典型 安装 ，Custom 为 自 定义 安装 。 在 默认 
情况 下 ， 选 择 典型 安装 即 可 ， 单 击 Next 按钮 ， 如 图 21-24 所 示 。 

EED 阐 出 安装 路 径 选 择 界面 ， 单 击 Change 按钮 ， 可 以 重新 设置 安装 路 径 ， 本 实例 采 
用 默认 安装 路 径 ， 单 击 Next 按钮 ， 如 图 21-25 所 示 。 





菁 Apache HTTP Server 2.2 - Installation Wizard x 涯 Apache HTTP Server 2.2 - Installation Wizard x 
Setup Type Destination Folder 
(Choose the setup type that best suits your needs. Cidk Change to nstal to a different folder 
Please select a setup type, nstal Apache HTTP Server 2.2 to the folder: 


C:\Program Fles (x36) pache Software Foundatonpache2.2\ | Change,. | 
图 Typical 
Typical program features will be instaled，(Headers and LUbraries 
for compiing modues wil not be nstaled.) 


Ocustom 
Choose which program features you want nstaled and where they 
wil be nstalled. Recommended for advanced users. 





nstalshield 
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图 21-24 ”安装 类 型 界面 图 21-25 ”安装 路 径 选 择 界面 


EC 弹出 安装 准备 就 绪 界 面 ， 单 击 Install 按钮 ， 如 图 21-26 所 示 。 
EEC 系统 开始 自动 安装 Apache 主 程序 ， 安 装 完成 后 ， 弹 出 提示 信息 界面 ， 单 击 
Finish 按钮 关闭 对 话 框 ， 如 图 21-27 所 示 。 
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21-26 ”安装 准备 就 绪 界面 21-27 ”Apache 安装 完成 品 

加 

21.4.4 ”案例 7 一 一 将 PHP 与 Apache 建立 关联 环 
境 


Apache 安装 完成 后 ， 还 不 能 运行 PHP 网 页 ， 需 要 将 PHP 与 Apache 建立 关联 。 

Apache 的 配置 文件 名 称 为 httpd.conf， 此 为 纯 文本 文件 ， 用 记事 本 即 可 打开 进行 编辑 。 此 
文件 存放 在 Apache 安装 目录 的 Apache2\config\ 目 录 下 。 另 外 ， 也 可 以 通过 单 击 【 开 始 】 按 
钮 ， 在 打开 的 菜单 中 选择 Apache HTTP Server 2.2 一 Edit the Apache httpd.conf Configuration 
File 命令 ， 如 图 21-28 所 示 。 

打开 Apache 的 配置 文件 后 ， 首 先 设置 网 站 的 主 目录 。 例 如 ， 如 果 将 案例 的 源 文件 放 在 D 
盘 的 php7book 文件 夹 下 ， 则 主 目录 就 需要 设置 为 d:/php7book/。 在 httpd.conf 配置 文件 中 找到 
DocumentRoot 参数 ， 将 其 值 修改 为 "d:/php7book/"， 如 图 21-29 所 示 。 


下 hapd conf - 记事 本 =- 日 Xx 
文 伯 。 昌 奖 (6 效 式 0) 百 硅 V)】 本 向 (H) 
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图 21-28 选择 Apache 配置 文件 21-29 ”设置 网 站 的 主 目录 
下 面 指定 php.ini 文件 的 存放 位 置 。 由 于 PHP 安装 在 d:\php7， 所 以 php.ini 位 于 
d:\php7\php.ini。 在 httpd.conf 配置 文件 中 的 任意 位 置 输入 语句 : PHPIniDir"d:\php7\php.ini"， 
如 图 21-30 所 示 。 
最 后 向 Apache 中 加 入 PHP 模块 。 在 httpd.conf 配置 文件 中 的 任意 位 置 加 入 3 行 语句 : 


. 
465 全 
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LoadModule php7 module"d:/php7/php7apache2 2.d1ll" 
AddType application/x-httpd-php .php 
AddType application/x-httpd-php .html 


输入 效果 如 图 21-31 所 示 。 完 成 上 述 操作 后 ， 保 存 httpd.conf 文件 即 可 。 然 后 重启 
Apache， 即 可 使 设置 生效 。 
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21-30 指定 php.ini 文件 的 存放 位 置 21-31 向 Apache 中 加 入 PHP 模板 


21.5 ”案例 8 一 一 Windows 下 使 用 WampServer 组 合 包 


对 于 刚 开 始 学 习 PHP 的 程序 员 ， 往 往 因 为 配置 环境 而 不 知 所 措 ， 为 此 本 节 讲 述 
WampServer 组 合 包 的 使 用 方法 。WampServer 组 合 包 是 将 Apache、PHP、MySQL 等 服务 器 软 
件 安装 配置 完成 后 打包 处 理 。 因 为 安装 简单 、 速 度 较 快 、 运 行 稳定 ， 所 以 它 受 到 广大 初学 者 
的 青睐 。 


Se 在 安装 WampServer 组 合 包 之 前 ， 需 要 确保 系统 中 没有 安装 Apache、PHP 和 
站。 ” MySQL。 否则， 需要 先 将 这 些 软 件 纯 载 ， 然 后 才能 安装 WampServer 组 合 包 。 


安装 WampServer 组 合 包 的 具体 操作 步骤 如 下 。 

ED 到 WampServer 官方 网 站 http://www.wampserver.com/en/ 下 载 WampServer 的 最 
新 安装 包 WampServer3.0.6-x32.exe 文件 。 

直接 双击 安装 文件 ， 打 开 选 择 安装 语言 对 话 框 ， 如 图 21-32 所 示 。 

单 击 OK 按钮 ， 在 弹出 的 对 话 框 中 选中 I accept the agreement 单 选 按钮 ， 如 图 21-33 
所 示 。 

YY 单 击 Next 按钮 ， 弹 出 信息 界面 ， 在 其 中 可 以 查看 组 合 包 的 相关 说 明 信 息 ， 如 
图 21-34 所 示 。 

EEJD 单 击 Next 按钮 ， 在 弹出 的 界面 中 设置 安装 路 径 ， 这 里 采用 默认 路 径 c:vwamp， 
如 图 21-35 所 示 。 

TB 单 击 Next 按钮 ， 在 弹出 的 界面 中 选择 开始 菜单 文件 夹 ， 这 里 采用 默认 设置 ， 
如 图 21-36 所 示 。 

ES 单 击 Next 按钮 ， 在 弹出 的 界面 中 确认 安装 的 参数 后 ， 单 击 Install 按钮 ， 如 
图 21-37 所 示 。 
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图 21-32 选择 安装 语言 对 话 框 图 21-33 ”接受 许可 证 协议 





@ Setup - Wampserver32 一 @ Setup - Wampserver32 一 x 


和 
六 学 站 包 革 恒 纺 间 四 型 一 吝 潮 习 纱 并 市 主 协 1z 尖 展 


Please read the folowing mportant nformation before contnung. Where should Wampserver32 be instaled? 


pe ee RETE Setup wl nstal Wampserser32 nto the folowing folcer, 















-- Installation of Wampserver --- 
IBEFORE proceeding with the installation of Wampserver, you must| To contnue, dick Next. If you woud ike to select a different folder, cick Browse, 
|ensure that certain elements are installed on your system, otherwise| so 

|wampserver will absolutely not run and in addition, the installaton will — ee 
be faulty and you need to remove Wampserver BEFORE installng the 
|elements that were missing. 

Make sure you are "up to dater im the redistributable packages 
|vc9, VC10, VC11, VC13 and VC14 

See 一 Viua/ ~ Packages below 

not install Wampserver OVER an existing version, folow the 
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图 21-34 信息 界面 图 21-35 设置 安装 路 径 





@ Setup - Wampserver32 = @ Setup - Wampserver32 a 


Select start Henu Folder OO@ Ready to inctal @ 


Where should Setup place the program’s shorteuts? Setup is now ready to begn instaling Wampserver32 on your computer. 
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图 21-36 设置 开始 菜单 文件 夹 图 21-37 确认 安装 参数 


程序 开始 自动 安装 ， 并 显示 安装 进度 ， 如 图 21-38 所 示 。 
安装 完成 后 ， 进 入 安装 完成 界面 ， 单 击 Finish 按钮 ， 完 成 WampServer 的 安装 操 
作 ， 如 图 21-39 所 示 。 
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@ Setup - Wampserver32 = 时 a pr 
Please wait while Setup instals Wanpserver32 on your conputer. MD) 人 Completing ne Wampserver32 
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Exacting fi CY Seiup hes freshed retaing Warpeerver 
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| | Alter Way 


Version 3.0.0by OF tentsenn. 


Dtomatic 
Wampserver 3.0.6 
32 bit x86 
Apache 2.4.23 
PHP 5.6.25/7.0.10 
MySQL 5.7.14 


EE 











21-38 ”正在 安装 程序 21-39 ”完成 安装 界面 
单 击 桌面 右 侧 的 WampServer 服务 按钮 国 ， 在 弹出 的 下 拉 菜 单 中 选择 Localhost 
命令 ， 如 图 21-40 所 示 。 
ECEDp 系统 自动 打开 浏览 器 ， 显 示 PHP 配置 环境 的 相关 信息 ， 如 图 21-41 所 示 。 
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四 Server Configuration 
Sh Apache Version: 2.423 - Documentation 
m PHP Version。 5.525 -| 
FP Server Software: Apache/2.4.23 (WAn32] PHP/S.6.25 - Port defined for Apache: 
& Y 
aol toaded Extensions ; 乔 spache2hender 淹 bomath 
名 Pee Wt 
四 com_dotnet 帘 cor 
RStart Al Sevices a pi 
3 Stop All Services 由 creg bi 
Fe pi 
Restart All Services 要 mp | 
办 9etad LE 
由 hash 条 iomv 
暂 imap EL 
由 json 入 Kap 
图 21-40 选择 Localhost 命令 21-41 ”PHP 配置 环境 的 相关 信息 


21.6 ”综合 案例 一 一 测试 第 一 个 PHP 程序 


上 面 讲述 了 两 种 服务 器 环境 的 搭建 方法 ， 读 者 可 以 根据 自己 的 需求 进行 选择 安装 即 可 。 

下 面 通过 一 个 实例 讲解 编写 PHP 程序 并 运行 查看 效果 。 下 面 以 IIS 服务 器 环境 为 例 进行 
讲解 。 读 者 可 以 使 用 任意 文本 编辑 软件 ， 如 记事 本 ， 新 建 名 称 为 helloworld 的 文件 ， 如 图 21-42 
所 示 。 代 码 如 下 : 


<HTML> 
<HEAD> 
</HEAD> 
<BODY> 


<h2>PHP Hello World - 来 自 PHP 的 问候 。</h2> 
<?php 
echo "Hello, World."; 
echo "你 好 世界 。"; 
?> 
</BODY> 
</HTML> 


将 文件 保存 在 主 目录 或 虚拟 目录 下 ， 保 存 格式 为 .php 。 在 浏览 器 的 地 址 栏 中 输入 
http://localhost/helloworld.php， 并 按 Enter 键 确认 ， 运 行 结 果 如 图 21-43 所 示 。 











- 0O x 
-|@ http//ocalho.. P -| @ localhort x| 
司 helloworldphp - 记事 本 - DO x | 文 作品。 入 号 日 可 看 M) 收 臣 实 (A) 工具 Mm 大 助 (H) 
文件 (有 恕 名 (E) 格式 (D) 查看 (V) 帮助 (H) 
PHP Hello World 一 来自 PHP 的 问候 。 





《HEAD》 
Hello，World .你 好 世界 。 


<BODY> 
<h2>PHP Hello World - 来 自 PHP 的 问候 。</h2> 
<?php 。 

echo “Hello, Yorld.”; 

echo“ 你 好 世界 。”; 
</BODY> 
em 











图 21-42 记事 本 窗口 图 21-43 程序 运行 效果 


【代码 详解 】 

(1) “PHP Hello World - 来 自 PHP 的 问候 。” 是 HTML 中 的 <HEAD><h2>PHP Hello 
World - 来 自 PHP 的 问候 。</h2></HEAD> 所 生成 的 。 

(2) “Hello，World. 你 好 世界 。” 则 是 由 <?php echo "Hello，World."; echo "你 好 世界 。 
"; ?> 生成 的 。 

(3) 在 HTML 中 嵌入 PHP 代码 的 方法 即 是 在 <?php ?> 标识 符 中 间 输 入 PHP 语句 ， 语 句 
要 以 “;” 号 结束 。 

(4) <?php ?> 标识 符 的 作用 就 是 告诉 Web 服务 器 ，PHP 代码 从 什么 地 方 开 始 ， 到 什么 地 
方 结束 。<?php ?> 标识 符 内 的 所 有 文本 都 要 按照 PHP 语言 进行 解释 ， 以 区 别 于 HTML 代码 。 


21.7 疑难 解 惑 


疑问 1: 如何 设置 网 站 的 主 目录 ? 

答 : 在 Windows 10 操作 系统 中 ， 设 置 网 站 主 目录 的 方法 如 下 。 

利用 本 章 讲解 的 方法 打开 【计算 机 管理 】 窗 口 ， 选 择 Default Web Site 选项 ， 如 图 21-44 
所 示 。 
在 右 侧 窗 格 中 单 击 【基本 设置 】 文 字 链接 ， 打 开 【 编 辑 网 站 】 对 话 框 ， 单 击 【物理 路 
径 】 文 本 框 右 侧 的 按钮 ， 即 可 在 打开 的 对 话 框 中 重新 设置 网 站 的 主 目录 ， 如 图 21-45 所 示 。 
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图 21-44 【计算 机 管理 】 窗口 
N 疑问 2: 如 何 印 载 IIS? 
答 : 读者 经 常会 遇 到 IIS 不 能 正常 使 用 的 情况 ， 所 以 需要 首先 卸载 IS， 然 后 再 次 安装 即 


可 。 利 用 本 章 的 方法 打开 【Windows 功能 】 对 话 框 ， 取 消 选 中 Internet Information Services 复 
选 框 ， 单 击 【确定 】 按 钮 ， 系 统 将 自动 完成 IIS 的 卸载 ， 如 图 21-46 所 示 。 


AN 








吾 国 了 NET Framework 3.5 (包括 .NET 2.0 和 3.0) ~ 
a 昌国 .NET Framework 4.6 高 级 服务 
9 Internet Explorer 11 




















Internet Information Services 可 子 载 的 Web 核心 
Microsoft Message Queue (MSMQ) 服务 器 

Microsoft Print to PDF 

RIP 侦 听 器 

SMB 1.0/CIFS 文件 共享 支持 

Telnet 喜 广 告 

TFTP 喜庆 六 

Windows ldentig Foundation 3.5 

Windows PowerShell 2.0 YY 


国 
物理 路 径 (P): 
[sesystemDrive3Vinetpub\wwwroot 
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21-45 【编辑 网 站 】 对 话 框 图 21-46 【Windows 功能 】 对 话 框 
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第 22 章 
构建 动态 网 站 后 台数 据 


一 一 使 用 MySQL 
数据 库 


数据 库 是 动态 网 站 的 关键 性 数据 ， 可 以 说 没有 数据 库 就 不 可 能 实现 动态 网 站 的 
制作 。 本 章 主 要 介绍 如 何 定义 动态 网 站 及 使 用 MySQL 数据 库 ， 包 括 MySQL 数据 
库 的 使 用 方法 、 在 网 页 中 使 用 数据 库 、MySQL 数据 库 的 高 级 设 定 等 。 
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22.1 定义 一 个 互动 网 站 


定义 一 个 互动 网 站 是 制作 动态 网 站 的 第 一 步 。 许 多 初学 者 会 忽略 这 一 点 ， 以 至 于 由 
Dreamweaver CC 所 产生 的 代码 无 法 与 服务 器 配合 。 


22.1.1 定义 互动 网 站 的 重要 性 


打开 Dreamweaver CC 的 第 一 步 不 是 制作 网 页 和 写 程 序 ， 而 是 先 定义 所 制作 的 网 站 ， 原 因 
有 以 下 3 点 。 

(1) 将 整个 网 站 视 为 一 个 单位 来 定义 ， 可 以 清楚 地 整理 出 整个 网 站 的 架构 、 文 件 的 配 
置 、 网 页 之 间 的 关联 等 信息 。 

(2) 在 同一 个 环境 下 一 次 性 定义 多 个 网 站 ， 而 且 各 个 网 站 之 间 不 冲突 。 

(3) 在 Dreamweaver CC 中 添加 了 一 项 测试 服务 器 的 设置 ， 如 果 事 先 定义 好 了 网 站 ， 就 可 
以 让 该 网 站 的 网 页 连接 到 测试 服务 器 里 的 数据 库 资源 中 ， 又 可 以 在 编辑 画面 中 预览 数据 库 中 
的 数据 ， 甚 至 打开 浏览 器 来 运行 。 


22.1.2 ”网 页 取得 数据 库 的 原理 


PHP 是 一 种 网 络 程序 语言 ， 它 并 不 是 MySQL 数据 库 的 一 部 分 ， 所 以 PHP 的 研发 单位 就 
制作 了 一 套 与 MySQL 沟通 的 函数 。SQL(Structured Query Language， 结 构 化 查询 语言 ) 就 是 这 
些 函数 与 MySQL 数据 库 连 接 时 所 运用 的 方法 与 准则 。 

几乎 所 有 的 关系 式 数据 库 所 采用 的 都 是 SQL 语法 ， 而 MySQL 就 是 使 用 它 来 定义 数据 库 
结构 、 指 定数 据 库 表 格 与 字段 的 类 型 与 长 度 、 添 加 数据 、 修 改 数据 、 删 除数 据 、 查 询 数据 ， 
以 及 建立 各 种 复杂 的 表格 关联 。 

所 以 ， 当 网 页 中 需要 取得 MySQL 的 数据 时 ， 它 可 以 应 用 PHP 中 MySQL 的 程序 函数 ， 
通过 SQL 的 语法 来 与 MySQL 数据 库 沟通 。 当 MySQL 数据 库 接收 到 PHP 程序 传递 过 来 的 
SQL 语法 后 ， 再 根据 指定 的 内 容 完 成 所 叙述 的 工作 再 返回 到 网 页 中 。PHP 与 MySQL 之 间 的 
运行 方式 如 图 22-1 所 示 。 


PHP 


网 页 应 用 程序 





图 22-1 PHP 与 MySQL 之 间 的 运行 方式 


根据 这 个 原理 ， 一 个 PHP 程序 开发 人 员 只 要 在 使 用 到 数据 库 时 遵循 下 列 步骤 ， 即 可 顺利 
获得 数据 库 中 的 资源 。 

(1) 建立 连接 (Connection) 对 象 来 设置 数据 来 源 。 

(2) 建立 记录 集 (Recordset) 对 象 并 进行 相关 的 记录 操作 。 


(3) 关闭 数据 库 连 接 并 清除 所 有 对 象 。 
22.1.3 ”案例 1 一 一 在 Dreamweaver CC 中 定义 网 站 

设置 网 站 服务 器 是 所 有 动态 网 页 编写 前 的 第 一 个 操作 ， 因 为 动态 数据 必须 要 通过 网 站 服 
务 器 的 服务 才能 运行 。 许 多 人 都 会 忽略 这 个 操作 ， 以 至 于 程序 无 法 执行 或 是 出 错 。 

1. 整理 制作 范例 的 网 站 信息 


在 开始 操作 之 前 ， 请 先 养 成 一 个 习惯 一 一 整理 制作 范例 的 网 站 信息 ， 有 具体 就 是 : 将 所 要 
制作 的 网 站 信息 以 表格 的 方式 列 出， 再 按 表 来 实施 ， 这 样 不 仅 可 以 让 网 站 数据 井井有条 ， 而 
且 在 进行 维护 工作 时 能 够 更 快 地 掌握 网 站 情况 。 

如 表 22-1 所 示 为 整理 出 来 的 网 站 信息 。 


表 22-1 网 站 信息 


本 机 服务 器 主 文件 夹 
程序 使 用 文件 夹 
程序 测试 网 址 


2. 定义 新 网 站 


整理 好 网 站 的 信息 后 ， 下 面 就 可 以 正式 进入 Dreamweaver CC 进行 网 站 编辑 了 。 具 体操 作 
步骤 如 下 。 
EEC 在 Dreamweaver CC 的 编辑 界面 中 ， 选 择 【 站 点 】 一 【管理 站 点 】 命 令 ， 如 图 22-2 
所 示 。 
EEIDp 在 【管理 站 点 】 对 话 框 中 单 击 【 新 建站 点 】 按 钮 ， 进 入 站 点 定义 对 话 框 ， 如 
图 22-3 所 示 。 


pr 另外 ， 用 户 也 可 以 直接 选择 【站 点 〗 一 【新 建站 点 】〗 命 令 ， 进 入 站 点 定义 对 话 


汇 。 框 ， 如 图 22-4 所 示 。 

















EE 
Ee 
本 本 
ES sow wm | sw #mn 
| Ny.. IN 
新 建 Business Catalyst 站 点 (B)… 新 建 Business Catalyst 站 点 [B)… 
管理 站 点 (M)… | 管理 站 点 (M)… 
获取 (G) R CE Be EE se] 获取 (G) 
取出 (IO Cm CJ 取出 (QO 





22-2 ”选择 【管理 站 点 】 命 令 22-3 【管理 站 点 】 对 话 框 22-4 选择 【新 建站 点 】 命 令 
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EEC 打开 站 点 设置 对 话 框 ， 输 入 站 点 名 称 为 【测试 网 站 】， 选 择 本 地 站 点 文件 夹 位 
置 为 C:vwampvwww， 如 图 22-5 所 示 。 
EC 在 左 侧 列表 中 选择 【服务 器 】 选 项 ， 单 击 + 按 钮 ， 如 图 22-6 所 示 。 




































































二 x 
| SN nn 
NR We i i 
Ed EE LE 1 1 珊 谍 
ie 
rr CR 可 CR 
22-5 设置 站 点 的 名 称 与 存放 位 置 22-6 选择 【服务 器 】 选 项 


ED 在 基本 标签 框 中 输入 服务 器 名 称 【 未 命名 的 服务 器 2】， 选 择 连 接 方法 为 【本 地 
/网 络 】， 选 择 服务 器 文件 夹 为 C:vwampvwww， 如 图 22-7 所 示 。 
Sn URL(Uniform Resource Locator， 统 一 资源 定位 器 ) 是 一 种 网 络 上 的 定位 系统 ， 可 
并 。 称 为 网 站 。Host 指 Intemet 连接 的 电脑 ， 至 少 有 一 个 固定 的 IP 地 址 。Localhost 指 本 
地 端的 主机 ， 也 就 是 用 户 自己 的 电脑 。 


EC 切换 到 【高 级 】 选 项 卡 ， 设 置 测试 服务 器 的 服务 器 模型 为 PHP MySQL， 最 后 单 
击 【保存 】 按 钮 保存 站 点 设置 ， 如 图 22-8 所 示 。 








































































































| 一 
地 务 吕 名 村 :不 看 帮 服 务 器 二 得 所 5 中 
连接 方法 : | 本 均 / 网 阁 KE 六 次 护 同 步 信息 
MX Evovrm 所 a 
二 由 文 件 各 士 功能 
Web URL: 区 打开 文件 之 前 了 出 
到 出 名 称 : 
电子 者 伯 地址: 
如 务 基 
Bs P17] 
Ea 7 EE 了 
图 22-7 【基本 】 选 项 卡 图 22-8 【高 级 】 选 项 卡 


@: 其 他 可 选 的 服务 器 模型 有 : ASP VBScript、ASP JavaScript、ASP. NET (C#、 


i 纺 VB )、ColdFusion、JSP 等 。 


ED 返回 到 Dreamweaver CC 的 编辑 界面 中 ， 在 【文件 】 面 板 上 会 显示 所 设置 的 结 
果 ， 如 图 22-9 所 示 。 

ER 如 果 想 要 修改 已 经 设置 好 的 网 站 ， 可 以 选择 【站 点 】 一 【站 点 管理 】 命 令 ,， 在 
打开 的 对 话 框 中 单 击 铅笔 按钮 ， 再 次 编辑 站 点 的 属性 ， 如 图 22-10 所 示 。 


信 474 


图 22-9 Dreamweaver CC 的 【文件 】 面 板 22-10 【管理 站 点 】 对 话 框 


3. 测试 设置 结果 
完成 了 以 上 的 设置 后 ， 下 面 可 以 制作 一 个 简单 的 网 页 来 测试 一 下 。 具 体操 作 步骤 如 下 。 
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ET 在 【文件 】 面 板 中 添加 一 个 新 文件 并 打开 该 文件 进行 编辑 。 要 添加 新 文件 ， 可 
选取 该 网 站 文件 夹 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 然 后 将 新 
文件 命名 为 test.php， 如 图 22-11 所 示 。 

EEC) 双击 <testphp> 打 开 新 文件 ， 在 页 面 上 添加 一 些 文字 ， 如 图 22-12 所 示 。 





国 惠 3 牛 ~ [| 
Ol | no | 
IE 大 小 [类 | 人 [DT 闪闪 坊 HE FREE 村 

ent> 







Hi, Dreamweaver CC !!! 


setonutf-8"> 
无 标题 文档 </tittey 


二 加 村 车 

















图 22-11 新 建文 件 图 22-12 添加 网 页 内 容 
ETE> 添加 完成 后 直接 按 F12 键 打开 浏览 器 本 
来 预览 ， 可 以 看 到 页 面 执行 的 结果 ， 如 EGR 本 GE 到 
图 22-13 所 示 。 Ti Dy 查看 (V 收 训 夫 (A) 工具 [T) Ce 
OF 不 过 这 样 似乎 与 预览 静态 网 页 时 没 ee 


注 ”有 什么 区 别 。 仔 细 看 看 这 个 网 页 所 执行 
让 的 网 址 ， 它 不 再 是 以 磁盘 路 径 来 显示 ， 
而 是 以 刚才 设置 的 URL 前 缓 图 22-13 ”网 页 预览 结果 
http://localhost/ 再 加 上 文件 名 来 显示 的 ， 
这 表示 网 页 是 在 服务 器 的 环境 中 运行 的 。 


EC 仅仅 这 样 还 不 能 完全 显示 出 互动 网 站 服务 器 的 优势 ， 再 加 入 一 行 代码 来 测试 程 
序 执行 的 能 力 。 首 先 回 到 Dreamweaver CC 中 ， 在 刚才 的 代码 后 添加 一 行 ， 如 图 22-14 
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所 示 。 


etphe An 
BIE 鸭 ， Hi 到: EXE | 村 | 
gz 


-一 
Hi，Dreamweaver CC !!! 








urf-any 
5 。 <titte> 元 标题 文档 <Jtitte> 现在 的 时 站 是 : 国 


6 </head> 


回 | 守 巷 可 还 革 | 委 口 


=: 图 : .- 
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22-14 ”添加 动态 代码 


| 代码 中 的 date0 是 一 个 PHP 的 时 间 吨 数 ， 其 中 的 参数 可 设置 显示 格式 ， 可 以 显示 
SS 目前 服务 器 的 时 间 ， 而 <?php echo..?> 会 将 函数 所 取得 的 结果 送 到 前 端 浏览 器 来 显 
示 ， 所 以 在 执行 这 个 页 面 时 ， 应 该 会 在 网 页 上 显示 出 服务 器 的 当前 时 间 。 


选择 ChltS 组 合 键 保存 文件 后 ， 再 | [oH Te ey CE 2 四 
按 F12 键 打开 浏览 器 进行 预览 ， 果 然 在 文件 (有 ”往日 二 看 WV) 收 基 内 工具 0m) 地 (H) 
刚才 的 网 页 下 方 出 现 了 当前 时 间 ， 如 Hi, Dreamweaver CC !!! 
图 22-15 所 示 。 这 就 表示 了 我 们 的 设置 现在 的 时 间 是 ，2017-07-18 05:11:18 


确实 可 用 ，Dreamweaver CC 的 服务 器 
环境 也 就 此 开始 了 。 图 22-15 动态 网 页 预览 结果 








22.2 MySQL 数据 库 的 安装 和 管理 


设置 好 网 站 服务 器 之 后 ， 下 面 还 需要 安装 MySQL 数据 库 。MySQL 不 仅 是 一 套 功能 强 
大 、 使 用 方便 的 数据 库 ， 更 可 以 跨越 不 同 的 平台 ， 提 供 各 种 不 同 操作 系统 的 使 用 。 


22.2.1 案例 2 一 一 MySQL 数据 库 的 安装 


要 想 在 Windows 中 运行 MySQL， 需 要 32 位 或 64 位 Windows 操作 系统 ， 如 Windows 
XP、 Windows Vista、 Windows 7、Windows 8、Windows Server 2003、Windows Server 2008 
等 。Windows 可 以 将 MySQL 服务 器 作为 服务 来 运行 ， 通 常 ， 在 安装 时 需要 具有 系统 的 管理 
员 权限 。 

Windows 平台 下 提供 两 种 安装 方式 : MySQL 二 进 制 分 发 版 (msi 安装 文件 ) 和 免 安 装 版 
(zip 压缩 文件 )。 一 般 来 讲 ， 应 当 使 用 二 进 制 分 发 版 ， 因 为 该 版 本 比 其 他 的 分 发 版 使 用 起 来 要 
简单 ， 不 再 需要 其 他 工具 来 启动 就 可 以 运行 MySQL。 这 里 ， 在 Windows 10 平台 上 选用 图 形 
化 的 二 进 制 安装 方式 ， 其 他 Windows 平台 上 安装 过 程 也 差不多 。 
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1. 下 载 MySQL 安装 文件 

下 载 MySQL 安装 文件 的 具体 操作 步骤 如 下 。 

打开 正 浏览 器 ， 在 地 址 栏 中 输入 网 址 http://dev.mysql.com/downloads/installer/， 
单 击 转 到 按钮 ， 打 开 MySQL Community Server 5.7.19 下 载 页 面 ， 选 择 Microsoft 
Windows 平台 ， 然 后 根据 读者 的 平台 选择 32 位 或 者 64 位 安装 包 ， 在 这 里 选择 32 
位 ， 单 击 右 侧 Download 按钮 开始 下 载 ， 如 图 22-16 所 示 。 

Sn 这 里 的 32 位 安装 程序 有 两 个 版 本 ， 分 别 为 mysql-installer-web-community 和 
江 mysqlLinstaller-community1， 其 中 mysql-installer-web-community 为 在 线 安装 版 本 ， 
mysql-installer-communityl 为 离线 安装 版 本 。 


EEJPpy 在 弹出 的 页 面 中 单 击 Login 按钮 ， 如 图 22-17 所 示 。 


























OE mn ao |W emo Wi x aol ODE | EY 
HM IV WAN TRM WD SRN SE EV Oar TEM NO 

MySQL Installer 5.7.19 a Begin Your Download ^ 

Select Operatng System Looking for previous GA ee 

ee no 可 Login Now or Sign Up for a free account. 

Windows (xa6, 32-bit), Msiinstaller S719 aSM 

mmchansialer mabeommunty 7490 meh 

sog6adscbbysatazoll58 
| -bit), Ms installer aa 
22-16 MySQL 下 载 页 面 图 22-17 单 击 Login 按钮 
SETep 弹出 用 户 登录 页 面 ， 输 入 用 户 名 和 密码 后 ， 单 击 【 登录】 按钮 ， 如 图 22-18 
所 示 。 


Se 如 果 用 户 没有 用 户 名 和 密码 ， 可 以 单 击 【创建 账户 】 链 接 进行 注册 即 可 。 


弹出 开始 下 载 页 面 ， 单 击 Download Now 按钮 ， 即 可 开始 下 载 ， 如 图 22-19 所 示 。 

















| ¢ En TE Tr EY 
ET 
登录 Begin Your Download 
As 本 
= To begin your download, please clck the Download Now button below. 
@ Download Now > 
| “= | - 
创建 帐户 
me | Ee 和 | RS | NF ,| 
22-18 用户 登录 页 面 22-19 开始 下 载 责 面 
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2. 安装 MySQL 5.7 
MySQL 下 载 完成 后 ， 找 到 下 载 文件 ， 双 击 进行 安装 。 具 体操 作 步 骤 如 下 。 
双击 下 载 的 mysql-installer-community-5.7.19.0.msi 文件 ， 如 图 22-20 所 示 。 


更 mysql-installer-community-5.7.19.0.msi Windows Installer 程序 包 387,844 KB 


22-20 ”MySQL 安装 文件 名 称 


打开 License Agreement( 用 户 许可 证 协议 ) 界 面 ， 选 中 I accept the license terms( 我 
接受 许可 协议 ) 复 选 框 ， 单 击 Next( 下 一 步 ) 按 钮 ， 如 图 22-21 所 示 。 


可 WSI 





x 





MySQL Installer 











图 22-21 用 户 许可 证 协议 界面 


ETB 打开 Choosing a Setup Type( 安 装 类 型 选择 ) 界 面 ， 在 其 中 列 出 了 5 种 安装 类 型 ， 
分 别 是 : Developer Default( 默 认 安装 类 型 )、Server only( 仅 作为 服务 器 )、Client 
only( 仅 作为 客户 端 )、Full( 完 全 安装 ) 和 Custom( 自 定义 安装 类 型 )。 这 里 选中 
Custom( 自 定义 安装 类 型 ) 单 选 按钮 ， 单 击 Next( 下 一 步 ) 按 钮 ， 如 图 22-22 所 示 。 


加 WsaL inetallor x 


MySQL. Installer Choosing a Setup Type 
Adding Communtly 




















22-22 ”安装 类 型 选择 界面 
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EC 打开 Select Products and Features( 产 品 定制 选择 ) 界 面 ， 选 择 MySQL Server 
5.7.19-x86 选项 后 ， 单 击 【 添 加 】 按 钮 沪 ， 即 可 选择 安装 MySQL 服务 器 。 采 用 同样 
的 方法 ， 添 加 MySQL Documentation 5.7.19-x86 和 Samples and Examples 5.7.19-x86 
选项 ， 如 图 22-23 所 示 。 
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图 22-23” 自 定义 安装 组 件 界面 


ET 单 击 Next( 下 一 步 ) 按 钮 ， 进 入 准备 安装 界面 ， 单 击 Execute( 执 行 ) 按 钮 ， 如 
图 22-24 所 示 。 
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22-24 ”准备 安装 界面 


开始 安装 MySQL 文件 ， 安 装 完成 后 在 Status( 状 态 ) 列 表 下 将 显示 Complete( 安 装 
完成 )， 如 图 22-25 所 示 。 
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图 22-25 ”安装 完成 界面 


Sn 在 安装 之 前 ， 如 果 系统 提示 需要 安装 Microsoft Visual C++ 2013， 用 户 根据 提示 
”进行 安装 即 可 。 


22.2.2 案例 3 一 一 MySQL 数据 库 的 配置 


MySQL 安装 完毕 之 后 ， 需 要 对 服务 器 进行 配置 。 具 体 配 置 步骤 如 下 。 
EEJDp 在 上 一 节 的 最 后 一 步 中 ， 单 击 Next( 下 一 步 ) 按 钮 ， 进 入 服务 器 配置 界面 ， 如 图 22-26 
所 示 。 
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22-26 服务 器 配置 界面 













全 
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第 日 
二 过 Ra a 
S53 单 击 Next( 下 一 步 ) 按 钮 ， 在 弹出 的 界面 中 采用 默认 设置 ， 如 图 22-27 所 示 。 N 
国 Mysot nstaler 一 3 ee 
本 构 
Installer Type and Networking 建 | 
® sanaalone Wsat Sever/ Cassie Msat neplication 动 
Choose this option ff you wantio run the MySQL Server Sther sandalone with 态 | 
the opportunity to ater configure clasic MySQL Replicaton 网 
Vngthi pen you con menealy eenfgu your enteaten sp nd prorie 站 | 
The InneDB cluster technolcgy previces an out-of the-box HA (high avalabifit) 数 
solution for MySQL using Group Replication technology 
using several MySQL Server sandbcxinstanczs Read mors about this here 
sa 使 
evar to create or expand the nnoDB chuster 用 
三 
\ i 
eae / 国 、 号 
ETT 一 TO 一 一 国 天 和 
CEE 数 
据 
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图 22-27 保持 默认 设置 
单 击 Next( 下 一 步 ) 按 钮 ， 进 入 MySQL 服务 器 的 具体 配置 界面 ， 如 图 22-28 所 示 。 
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图 22-28 ”MySQL 服务 器 具体 配置 界面 


MySQL 服务 器 配置 窗口 中 各 个 参数 的 含义 如 下 。 
Server Configuration Type: 该 选项 用 于 设置 服务 器 的 类 型 。 单 击 该 选项 右 侧 的 向 下 按 
钮 ， 即 可 看 到 3 个 选项 ， 如 图 22-29 所 示 。 
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口 Show Advanced Options 





图 22-29 MySQL 服务 器 的 类 型 
图 22-29 中 3 个 选项 的 具体 含义 如 下 。 
(1) Development Machine( 开 发 机 器 )。 该 选项 代表 典型 个 人 用 桌面 工作 站 。 假 定 机 器 上 


运行 着 多 个 桌面 应 用 程序 。 将 MySQL 服务 器 配置 成 使 用 最 少 的 系统 资源 。 
(2) Server Machine( 服 务 器 )。 该 选项 代表 服务 器 。MYySQL 服务 器 可 以 同 其 他 应 用 程序 一 
起 运行 ， 如 FTP、Email 和 Web 服务 器 。 将 MySQL 服务 器 配置 成 使 用 适当 比例 的 系统 资源 。 
(3) Dedicated Machine( 专 用 服务 器 ): 该 选项 代表 只 运行 MySQL 服务 的 服务 器 。 假 定 没 
有 运行 其 他 服务 程序 ， 将 MySQL 服务 器 配置 成 使 用 所 有 可 用 系统 资源 。 
作为 初学 者 ， 建 议 选 择 Development Machine( 开 发 者 机 器 ) 选 项 ， 这 样 占用 系统 的 


uD 
提示 
SS 资源 比较 少 。 
EEC》 单 击 Next( 下 一 步 ) 按 钮 ， 打 开设 置 服 务 器 密码 的 界面 ， 重 复 输 入 两 次 同样 的 登 
录 密 码 ， 如 图 22-30 所 示 。 
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Root Account Password 
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Password Strength: 




















< Back Net> Cancel 











22-30 设置 服务 器 的 登录 密码 
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za 系统 默认 的 用 户 名 称 为 root， 如 果 想 添加 新 用 户 ， 可 以 单 击 Add User( 添 加 用 户 ) 


二 按钮 进行 添加 。 
攻 于 BY 单 击 Next( 下 一 步 ) 按 钮 ， 打 开设 置 服务 器 名 称 的 界面 ， 本 案例 设置 服务 器 名 称 
为 MySQL， 如 图 22-31 所 示 。 
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图 22-31 设置 服务 器 的 名 称 


EET 单 击 Next( 下 一 步 ) 按 钮 ， 进 入 Plugins and Extensions( 插 件 与 扩展 ) 界 面 ， 采 用 默 
认 设 置 ， 如 图 22-32 所 示 。 
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22-32 ”插件 与 扩展 界面 
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单 击 Next( 下 一 步 ) 按 钮 ， 进 入 确认 设置 服务 器 界面 ， 如 图 22-33 所 示 。 
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22-33 ”确认 设置 服务 器 


EC) 单 击 Execute( 执 行 ) 按 钮 ， 系 统 自 动 配置 MySQL 服务 器 。 配 置 完成 后 ， 单 击 
Finish( 完 成 ) 按 钮 ， 即 可 完成 服务 器 的 配置 ， 如 图 22-34 所 示 。 


加 MysQL Installer 一 中 
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22-34 ”完成 服务 器 配置 


EEJRD) 按 Ctrl+AlttDel 组 合 键 ， 打 开 【 任 务 管理 器 】 对 话 框 ， 可 以 看 到 MySQL 服务 进 
程 MySQLd.exe 已 经 启动 了 ， 如 图 22-35 所 示 。 











国 wndcws shal perience + 
了 了 BEE 














图 22-35 【任务 管理 器 】 对 话 框 
至 此 ， 就 完成 了 在 Windows 10 操作 系统 环境 下 安装 MySQL 的 操作 。 


22.2.3 ”案例 4 一 一 phpMyAdmin 的 安装 


MySQL 数据 库 的 标准 操作 界面 ， 必 须要 使 用 命令 提示 符 ， 通 过 MySQL 的 指令 来 建 置 管 
理 数据 库 内 容 。 如 果 想 要 执行 新 增 、 编 辑 及 删除 数据 库 的 内 容 就 必须 要 学 习 陌生 的 SQL 语 
法 ， 背 诵 艰 深 的 命令 指令 ， 才 能 使 用 MySQL 数据 库 。 

难道 没有 较为 简单 的 软件 可 以 让 用 户 在 类 似 Access 的 操作 环境 下 直接 管理 MySQL 数据 
库 吗 ? 管 案 是 肯定 的 ， 而 且 这 样 的 软件 还 不 少 ， 其 中 最 常用 的 就 是 phpMyadmin。 

phpMyadmin 软件 是 一 套 Web 界面 的 MySQL 数据 库 管理 程序 ， 不 仅 功能 完整 、 使 用 方 
便 ， 而 且 只 要 用 户 有 适当 的 权限 ， 就 可 以 在 线 修改 数据 库 的 内 容 ， 并 让 用 户 更 安全 快速 地 获 
得 数据 库 中 的 数据 。 

用 户 可 以 通过 网 址 http://www.phpmyadmin.net/ 获 得 phpMyAdmin 软件 。 下 面 以 安装 
phpMyAdmin-4.7.2-all-languages.zip 为 例 进行 讲解 安装 的 方法 。 有 具体 操作 步骤 如 下 。 

EJP 右 击 下 载 的 pppMyAdmin 压缩 文件 ， 在 弹出 的 快捷 菜单 中 选择 【解压 文件 】 命 

令 ， 如 图 22-36 所 示 。 
ECEDy 将 解压 后 的 文件 放置 到 网 站 根 目录 < C:vwampvwww> 之 下 ， 如 图 22-37 所 示 。 
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图 22-36 解压 文件 图 22-37 解压 后 的 文件 
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打开 浏览 器 ， 在 网 址 栏 中 输入 http://localhost/phpMyAdmin/index.php， 运 行 结果 
如 图 22-38 所 示 ， 该 运行 结果 表示 phpMyAdmin 能 够 正确 执行 。 


二 和 区 
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22-38 ” phpMyAdmin 运行 界面 
22.2.4 ”案例 5 一 一 MySQL 数据 库 的 建立 


由 于 MySQL 数据 库 的 指令 都 是 在 命令 提示 符 界面 中 使 用 的 ， 所 以 这 对 于 初学 者 是 比较 
难 的 。 针 对 这 一 难题 ， 本 书 中 采用 phpMyAdmin 管理 程序 来 执行 ， 以 便 能 有 更 简易 的 操作 环 
境 与 使 用 效果 。 


1. 启动 phpMyAdmin 管理 程序 


phpMyAdmin 是 一 套 使 用 PHP 程序 语言 开发 的 管理 程序 ， 它 采用 网 页 形式 的 管理 界面 。 
如 果 要 正确 执行 这 个 管理 程序 ， 就 必须 在 网 站 服务 器 上 安装 PHP 与 MySQL 数据 库 。 

如 果 要 启动 phhpMyAdmin 管理 程序 ， 只 要 单 击 桌面 右 下 角 的 WampServer 图 标 ， 在 弹出 
的 菜单 中 选择 phpMyAdmin 命令 ， 如 图 22-39 所 示 。phpMyAdmin 启动 后 的 主 界面 如 图 22-40 
所 示 。 用 户 只 需要 单 击 【 新 建 】 链 接 ， 即 可 创建 新 的 数据 库 。 

















22-39 选择 phpMyAdmin 命令 22-40 phpMyAdmin 的 工作 界面 


2. 创建 数据 库 
在 MySQL 数据 库 安装 完毕 之 后 ， 会 有 4 个 内 置 数据 库 : mysql、information schema、 


Performance_schema 和 sys。 

(1) mysql 数据 库 是 系统 数据 库 ， 在 24 个 数据 表 中 保存 了 整个 数据 库 的 系统 设置 ， 十 分 
重要 。 

(2) information schema 包括 数据 库 系 统 有 什么 库 、 有 什么 表 、 有 什么 字典 、 有 什么 存储 
过 程 等 所 有 对 象 信息 和 进程 访问 、 状 态 信息 。 

(3) performance schema 新 增 一 个 存储 引擎 ， 主 要 用 于 收集 数据 库 服务 器 性 能 参数 。 包 
括 锁 、 互 斥 变量 、 文 件 信息 ;保存 历史 的 事件 汇总 信息 ， 为 提供 MySQL 服务 器 性 能 做 出 详 
细 的 判断 ， 对 于 新 增 和 删除 监控 事件 点 都 非常 容易 ， 并 且 可 以 随意 改变 mysql 服务 器 的 监控 
周期 。 

(4) sys 数据 库 是 让 用 户 测试 用 的 数据 库 ， 可 以 在 里 面 添加 数据 表 来 测试 。 

Sn performance schema 可 以 帮助 DBA 了 解 性 能 降低 的 原因 。 mysql、 
information_schema 为 关键 库 ， 不 能 被 删除 ， 否 则 数据 库 系 统 不 再 可 用 。 


这 里 以 在 MySQL 中 创建 一 个 企业 员工 管理 数据 库 company 为 例 ， 并 添加 一 个 员工 信息 
表 employee。 如 图 22-41 所 示 ， 在 文本 框 中 输入 要 创建 数据 库 的 名 称 company， 再 单 击 【 创 
建 】 按 钮 即 可 。 
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〗 数据 库 司 SQL 万 关 态 2 用户 如 5S 出 局 SA 广 证 更 多 


数据 库 


襄 新 建 数据 库 大 
company 排序 规则 日 创建 














22-41 ”创建 数据 库 company 


在 一 个 数据 库 中 可 以 保存 多 个 数据 表 ， 以 本 页 所 举 的 范例 来 说 明 : 一 个 企业 员工 
站 管理 的 数据 库 中 ， 可 以 包含 员工 信息 数据 表 、 岗 位 工资 数据 表 、 销 售 业绩 数据 表 等 。 
因此 ， 这 里 需要 创建 数据 库 company， 也 需要 创建 数据 表 employee。 


3. 认识 数据 表 的 字段 


在 添加 数据 表 之 前 ， 首 先 要 规划 数据 表 中 要 使 用 的 字段 。 其 中 设置 数据 字段 的 类 型 非常 
重要 ， 使 用 正确 的 数据 类 型 才能 正确 保存 和 应 用 数据 。 

在 MySQL 数据 表 中 常用 的 字段 数据 类 型 可 以 分 为 3 个 类 别 。 

(1) 数值 类 型 。 可 用 来 保存 、 计 算 的 数值 数据 字段 ， 如 会 员 编号 、 产 品 价格 等 。 在 
MySQL 中 的 数值 字段 按照 保存 的 数据 所 需 空间 大 小 有 如 表 22-2 所 示 的 区 别 。 
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表 22-2 数值 类 型 







数据 的 表示 范围 
signed -28 一 127，unsigned0 一 255 





SMALLINT 
MEDIUMINT 


signed -32768 一 32767，unsigned0 一 65 535 








Signed-8388 608 一 8388 607，unsigned0 一 16777215 





signed -2 227 483 648 一 2227483 647，unsigned0 一 4294967295 
注 : signed 表示 其 数值 数据 范围 可 能 有 负 值 ，unsigned 表示 其 数值 数据 均 为 正 值 。 


(2) 日 期 及 时 间 类 型 。 可 用 来 保存 日 期 或 时 间 类 型 的 数据 ， 如 会 员 生日 、 留 言 时 间 等 。 
MySQL 中 的 日 期 及 时 间 类 型 有 如 表 22-3、 表 22-4、 表 22-5 所 示 的 几 种 格式 。 


表 22-3 日 期 数据 类 型 


数据 类 型 名 称 


数据 的 表示 范围 | '1000-01-01'~'9999-12-31 
"YYYY-MM-DD" "YY-MM-DD" "YYYYMMDD" "YYMMDD" YYYYMMDD YYMMDD 
注 : 在 数据 格式 中 ， 若 没有 加 上 引号 则 为 数值 的 表示 格式 ; 若 前 后 加 上 引号 则 为 字符 串 的 表示 格式 。 





表 22-4 时 间 数 据 类 型 


数据 类 型 名 称 
存储 空间 


数据 的 表示 范围 '-838:59:59'~'838:59:59' 
"hhmmss" hhmmss 
注 : 在 数据 格式 中 ， 若 没有 加 上 引号 则 为 数值 的 表示 格式 ， 若 前 后 加 上 引号 则 为 字符 串 的 表示 格式 。 


表 22-5 日 期 与 时 间 数 据 类 型 





数据 类 型 名 称 DATETIME 
存储 空间 8 byte 
数据 的 表示 范围 | "1000-01-01 00:00:00'~'9999-12-31 23:59:59' 








"YYYY-MM-DD hh:mm:ss” "YY-MM-DD hh:mm:ss” "YYYYMMDDhhmmss" 
"YYMMDDhhmmss" YYYYMMDDhhmmss YYMMDDhhmmss 


数据 格式 





注 : 在 数据 格式 中 ， 若 没有 加 上 引号 则 为 数值 的 表示 格式 ; 若 前 后 加 上 引号 则 为 字符 串 的 表示 格式 。 


(3) 文本 类 型 。 可 用 来 保存 文本 类 型 的 数据 ， 如 学 生 姓 名 、 地 址 等 。 在 MySQL 中 文本 
类 型 数据 有 如 表 22-6 所 示 的 几 种 格式 。 

在 设置 数据 表 时 ， 除 了 要 根据 不 同性 质 的 数据 选择 适合 的 字段 类 型 之 外 ， 有 些 重要 的 字 
段 特 性 定义 也 能 在 不 同 的 类 型 字段 中 发 挥 其 功能 ， 常 用 的 设置 如 表 22-7 所 示 。 


表 22-6 文本 数据 类 型 





CHAR(M) 


M bytes， 最 大 为 255 bytes 





必须 指定 字段 大 小 ， 数 据 不 足 时 以 空白 字符 填 满 





VARCHAR(M) | M bytes， 最 大 为 255 bytes 





必须 指定 字段 大 小 ， 以 实际 填 入 的 数据 内 容 来 存储 








最 多 可 保存 25 535 bytes 


不 需要 指定 字段 大 小 


表 22-7 ”特殊 字段 数据 类 型 





特性 定义 名 称 适用 类 型 定义 内 容 
SIGNED.UNSIGNED _| 数值 类 型 定义 数值 数据 中 是 否 允 许 有 负 值 ，SIGNED 表示 人 允许 
AUTOINCREMENT 数值 类 型 自动 编号 ， 由 0 开始 以 1 来 累加 
BINARY 文本 类 型 保存 的 字符 有 大 小 写 区 别 
NULL.NOTNULL 全 部 是 否 允许 在 字段 中 不 填 入 数据 
默认 值 全 部 若是 字段 中 没有 数据 ， 即 以 默认 值 填充 
主键 全 部 主 索 引 ， 每 个 数据 表 中 只 能 允许 一 个 主键 列 ， 而 且 该 栏 数据 
不 能 重复 ， 加 强 数 据 表 的 检索 功能 


提示 





如 果 想 要 更 了 解 MySQL 其 他 类 型 的 数据 字段 及 详细 数据 ， 可 以 参考 MYSQL 的 


人 、 使 用 手册 或 MySQL 的 官方 网 站 : http://www. mysql.com。 


4. 添加 数据 表 


要 添加 一 个 员工 信息 数据 表 ， 如 表 22-8 所 示 是 这 个 数据 表 字 段 的 规划 。 


表 22-8 员工 信息 数据 
是 否 为 空 








cmEmail 





cmPhone 








其 中 有 以 下 几 个 要 注意 的 地 方 。 

(1) 员工 编号 (cmID) 为 这 个 数据 表 的 主 索 引 字段 ， 基 本 上 它 是 数值 类 型 保存 的 数据 ， 因 
为 一 般 编号 不 会 超过 两 位 数 ， 也 不 可 能 为 负数 ， 所 以 设置 它 的 字段 类 型 为 TINYINT(2)， 属 性 
为 UNSIGNED 。 在 添加 数据 时 ， 数 据 库 能 自动 为 员工 编号 ， 所 以 在 字段 上 加 入 了 
auto_increment 自动 编号 的 特性 。 
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(2) 姓名 (cmName) 属 于 文本 字段 ， 一 般 不 会 超过 10 个 中 文字 ， 也 就 是 不 会 超过 20 Bytes， 
所 以 这 里 设置 为 VARCHAR(20)。 

(3) 性 别 (cmSex) 属 于 文本 字段 ， 因 为 只 保存 一 个 中 文字 ( 男 或 女 )， 所 以 设置 为 CHAR(2)， 
默认 值 为 “ 男 ”。 

(4) 生日 (cmBirthday) 属 于 日 期 时 间 格式 ， 设 置 为 DATE。 

(5) 电子 邮件 (cmEmail) 和 住址 (cmAddress) 都 是 文本 字段 ， 设 置 为 VARCHAR(100)， 最 多 
可 保存 100 个 英文 字符 ，50 个 中 文字 。 电 话 (cmPhone) 设 置 为 VARCHAR(100)， 因 为 每 个 人 
不 一 定 有 这 些 数据 ， 所 以 这 3 个 字段 允许 为 空 。 

接着 就 要 回 到 phpMyAdmin 的 管理 界面 ， 为 MySQL 中 的 company 数据 库 添 加 数据 表 。 
在 左 侧 列表 中 选择 创建 的 company 数据 库 ， 输 入 添加 的 数据 表 名 称 和 字段 数 ， 然 后 单 击 【 执 
行 】 按 钮 ， 如 图 22-42 所 示 。 
phpMyAdmin 

















图 22-42 新 建 数据 表 employee 
请 按照 表 22-8 中 的 内 容 设 置 数据 表 ， 如 图 22-43 所 示 为 添加 的 数据 表 字 段 。 


司 训 涛 负 局 SOL 导 抽 二 革 括 A 局 5 同 SA 和 信和 人 作 污 角 2 吕 





数 扣 名。 ompioyee aad 1 coumn(s) (MF 
续 构 起 
名 字 类 里 天 长 变 怕 这 My 拉 应 规则 
miD NT 回 8 无 回 | gb2312_chinese 加 
|emweme vARcHAR | 20 无 回 | gb2312 chinese [| 
msex CRAR 辣 世 去 勾 : 加 | 902312 chinosce (TI 
eminncey DATE 加 | 无 回 | gb2312 chinese [v] 
cmEmail VARCHAR 。 回 | 100 二 回 | gb2312_chinese 加 
emphone VaRcHAR | 50 无 回 | | gb2312 chinese 加 | 
modreso wacma | tm 天 加 [902312 dhinese [I 


22-43 ”添加 数据 表 字 段 
设置 的 过 程 中 要 注意 以 下 4 点 。 
(1) 设置 cmID 为 整数 。 
(2) 设置 cmID 为 自动 编号 。 
(3) 设置 cmID 为 主键 列 。 
(4) 允许 cmEmail、cmPhone、cmAddress 为 空位 。 
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在 设置 完毕 之 后 ， 单 击 【保存 】 按 钮 ， 在 打开 的 界面 中 可 以 查看 完成 的 employee 数据 
表 ， 如 图 22-44 所 示 。 





一 EDEEETTTTTOTTEETEETTT 


是 蔽 对 构 操 SQL 亏 执 素 半 烽 A 忌 SU 刀 SA o 机 内 让 二 作 世家 发 
二 名字 EB 笠 序 规则 局 性 。 空 要 认 大 仆 其 作 
1emD mt eesp 硬 元 矿 八里 刚 伯 疙 大 建国 蛤 一 司 款 引 攻 六 间 = 更 多 
D2 cmMome 。 verchar20) 9b2312_chiness ci 要 去 人 站 合 刚 交 少 主 键 国 星 一 司 于 引 隆 衬 间 = 更 务 
回 3 emsex char2) gb2312 chinese cl EE] 六 人 让 全 风味 访 这 国 认 司 系 引 加 空间 更 多 
口 4 amBinhdoy date LE .7 作 收回 人 少 王 乱 醒 虹 - 司 系 引 辽 空 间 v 更 和 
问 5 emEmall 。 varcharf100) 9b2312_chinesa cl 是 MLL 。 太 b& 四 疙 秆 围 电 - 司 素 引 加 空间 更 多 
器 6 emphone 。 varcharl50) gb2312 chinese ci 是 NL 浓 介 法 因 刚 呈 少 三 入 国生 一 习 末 引 际 空间 更 多 
回 7 emAddress vatchar(100) 9b2312_chinese cl 是 MLL 。 太公 履 加 出 棱 访 秆 图 电 - 国 素 引 加 宇 间 更 多 


+ 四 2 7 和 国 浊 半 作 区 局 W9 少 主 时 国 必 ~- 司 地 引 





图 22-44 employee 数据 表 
5. 添加 数据 
添加 数据 表 之 后 ， 还 需要 添加 具体 的 数据 。 具 体操 作 步 骤 如 下 。 


EEC 选择 employee 数据 表 ， 选 择 菜单 上 的 【插入 】 选 项 。 依 照 字 段 的 顺序 ， 将 对 应 
的 数值 依次 输入 ， 单 击 【 执 行 】 按 钮 ， 即 可 插入 数据 ， 如 图 22-45 所 示 。 
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ete 辣 国 jossr 
mmdhem wacher(100) 司 可 基本 面 5 可 “ 
ra 
图 22-45 插入 数据 
SEO 按照 图 22-46 所 示 的 数据 ， 重 复 执行 上 一 步 的 操作 ， 将 数据 输入 到 数据 表 中 。 
cmlD cmName cmSex cmBirthday cmEmail cmPhone cmAddress 
10001 王猛 男 1982-06-02 | pingguo@163 com 0992-1234567 长 鸣 路 12 号 
10002 王 小 敏 ” 女 1972-06-02 ”wangxiaomin@163.com 0992-1234560 西 华 街 19 号 
10003 张 华 男 1970-06-02 | zhanghua@163.com 0992-1234561 | 长 安 路 20 号 
10004 王菲 女 1982-03-02 wangfei@163.com 0992-1234562 兴隆 街 11 号 
10005 杨康 男 1978-06-02 yangkang@163.com “0992-1234568 | 长 安 竺 20 号 
10006 冯 菲 菲 女 1982-03-20 fengfeifei@163.com 0992-1234512 长安 街 42 号 


22-46 输入 的 数据 


22.3 ”在 网 页 中 使 用 MySQL 数据 库 


一 个 互动 网 页 的 呈现 ， 实 际 上 就 是 将 数据 库 整理 的 结果 显示 在 网 页 上 。 因 此 ， 如 何在 网 
页 中 连接 到 数据 库 ， 并 读 出 数据 显示 ， 甚 至 选择 数据 来 更 改 ， 就 是 一 个 重点 。 
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22.3.1 案例 6 一 一 添加 数据 库 面板 


在 默认 情况 下 ，Dreamweaver CC 中 的 数据 库 面板 是 不 存在 的 ， 要 想 使 用 数据 库 面 板 ， 需 
要 安装 数据 库 的 扩展 程序 。 下 面 介绍 如 何在 Dreamweaver CC 中 添加 数据 库 面板 。 


1. 安装 Adobe Extension Manager CC 


Adobe Extension Manager CC 是 Adobe 为 旗下 CC 系列 软件 推出 的 一 款 扩展 插件 管理 软 
件 。 这 款 软 件 不 仅 可 以 帮助 用 户 管理 已 经 安装 的 扩展 功能 ， 还 能 帮助 用 户 安装 新 的 扩展 。 对 
一 些 经 常用 到 扩展 插件 的 设计 师 们 来 说 这 款 软件 是 必 备 的 。 
安装 Adobe Extension Manager CC 的 具体 操作 步骤 如 下 。 
双击 Adobe Extension Manager CC 安装 程序 ， 打 开 【Adobe 安装 程序 】 对 话 框 ， 
在 其 中 显示 了 程序 初始 化 的 进度 ， 如 图 22-47 所 示 。 
ED 初始 化 完毕 后 ， 打 开 【Adobe 软件 许可 协议 】 界 面 ， 在 其 中 可 以 查看 相关 许可 
协议 信息 ， 如 图 22-48 所 示 。 








Adobe 软件 许可 协议 
pt 本 


读 吉 前 安 导 、 使 用 AGoD9 产品 《每 揪 此 软件 ) 时 二 委 江 守 裕 议 。 闪 可 以 型 www ooopo comVgoy 
yoccounL Cn 由 朋 语 闪 已 接受 的 抽 流 。 








全 Adobe 六 等 旺 序 x 
正在 初始 化 安装 程序 











图 22-47 程序 初始 化 图 22-48 许可 协议 


EGRB 单 击 【接受 】 按 钮 ， 进 入 【选项 】 界 面 ， 在 其 中 设置 软件 的 安装 位 置 ， 并 选择 
安装 语言 ， 这 里 采用 系统 默认 设置 ， 如 图 22-49 所 示 。 

EGR 单 击 【安装 】 按 钮 ， 即 可 开始 安装 软件 ， 并 显示 安装 的 进度 ， 如 图 22-50 所 示 。 

EEJD 安装 完毕 后 ， 系 统 弹出 【安装 完成 】 界 面 ， 如 图 22-51 所 示 。 

EC 单 击 【立即 启动 】 按 钮 ， 即 可 启动 Adobe Extension Manager CC， 进 入 软件 工作 
界面 ， 如 图 22-52 所 示 。 


2. 安装 数据 库 扩展 


Adobe Extension Manager CC 安装 完成 后 ， 下 面 就 可 以 安装 数据 库 扩 展 程 序 了 。 有 具体 的 操 


作 步 骤 如 下 。 
EC 在 Adobe Extension Manager CC 软件 工作 界面 中 选择 【文件 】 一 【安装 扩展 】 命 
令 ， 打开 【选取 要 安装 的 扩展 】 对 话 框 ， 在 其 中 选择 数据 库 扩展 软件 ， 如 图 22-53 
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第 
所 示 。 S 
ECEJDy 单 击 【 打 开 】 按钮 ， 即 可 启动 安装 程序 ， 并 弹出 软件 说 明 性 信息 界面 ， 如 图 22-54 瑟 
所 示 。 构 
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和 。 

| sR 
库 上 

22-49 【选项 】 田 面 图 22-50 ”安装 进度 界面 





LETT = x 























22-51 【安装 完成 】 界面 图 22-52 Adobe Extension Manager CC 工作 界面 
EE x 
宣 找 范围 (1) 
怕 流 访问 。 钱 MX682801_FX_pHpMissingToolszxp Mdobe Zip Formet -. 
国 四 :huiuku cp Adobe Zip Format -. 
点 面 
nm 
甘 
国 
此 电 及 
中 
了 网络 
vem [mm 本 [Caol 
ytkao: [re 可 到 
22-53 【选取 要 安装 的 扩展 】 对 话 框 22-54 ”说 明 性 信息 界面 
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BY 单 击 【接受 】 按 钮 ， 即 可 开始 安装 扩展 ， 安 装 完成 后 ， 会 在 Adobe Extension 
Manager CC 的 工作 界面 中 显示 安装 的 扩展 ， 如 图 22-55 所 示 。 


ECG 启动 Dreamweaver CC， 选 择 【 窗 口 】 一 【数据 库 】 命 令 ， 即 可 打开 【数据 库 】 
面板 ， 这 就 说 明 【 数 据 库 】 面 板 添加 成 功 ， 如 图 22-56 所 示 。 


和 








| ear 


二 一 文档 类 型 : HDL 





着 要 在 该 页 面 上 使 用 动态 数据 : 
1. 为 该 文件 创建 站 点 。 

2. 选择 一 种 立 档 类 型 。 

3 设置 站 点 的 测 壕 服务 吕 。 

4 单 击 上 面 的 + 按钮 创建 这 接 。 








图 22-55 显示 安装 的 扩展 信息 


图 22-56 【数据 库 】 面 板 
22.3.2 ”案例 7 一 一 建立 MySQL 数据 库 连 接 


在 Dreamweaver CC 中 ， 连 接 数据 库 十 分 轻松 简单 。 下 面 使 用 一 个 实例 来 说 明 如 何 使 用 
Dreamweaver CC 建立 数据 库 连 接 。 


EE 打开 “素材 \ch22\showdata.php” 文 件 ， 静 态 页 面 效果 如 图 22-57 所 示 。 


ECRP9 选择 【窗口 】 一 【数据 库 】 命 令 ， 打 开 【 数 据 库 】 面 板 。 单 击 【 数 据 库 】 面 板 


EC 进入 【MySQL 连接 】 对 话 框 后 ， 填 入 自 定义 的 连接 名 称 company， 填 入 mysql 
服务 器 的 用 户 名 和 密码 ， 单 击 【选取 】 按 钮 来 选取 连接 的 数据 库 ， 如 图 22-59 所 示 。 


国 - ws: me 


5 
wa | Eq 
- 1 为 该 文件 创建 站 点 。 
v2 
笠 副 网 络 科技 有 限 公司 员工 生息 表 - 


2 选择 一 种 立 档 内 型 。 





3. 设置 站 点 的 测 玉 服务 器。 
<4. 单 击 上 面 的 + 按钮 创建 连接 








22-57 ”静态 页 面 效 果 








图 22-58 连接 数据 库 
EEC 打开 【选取 数据 库 】 对 话 框 ， 选 择 company 数据 库 ， 单 击 【 确 定 】 按 钮 ， 如 
图 22-60 所 示 。 



























































MySQL 连接 X 运 训 区 二 过 
连接 名 称 :company We | 
MySQL 服务 器 : [1ocalhost [| wh | 取消 
用 户 名 : [root MA 地 助 
密码 - EE 
数据 库 - 过 到 
22-59 【MySQL 连接 】 对 话 框 22-60 【选取 数据 库 】 对 话 框 


EEmD 返回 到 原 界面 后 ， 单 击 【测试 】 按 钮 ， 提 示 成 功 创建 连接 脚本 ， 单 击 【 确 定 】 
按钮 ， 如 图 22-61 所 示 。 

ED 回 到 Dreamweaver CC 后 ， 可 以 打开 【数据 库 】 面 板 ，company 数据 库 的 
employee 数据 表 在 连接 设置 后 已 经 读 入 Dreamweaver CC 了 ， 如 图 22-62 所 示 。 








ee (vardl 
cnphone (vercher 50 必需 的 ) 
9 msex (char 2 必需 的 ) 




















图 22-61 连接 数据 库 图 22-62 【数据 库 】 面 板 


Se 权限 概念 的 实现 是 MySQL 数据 库 的 特色 之 一 。 在 设置 连接 时 ，Dreamweaver CC 

江 ”不 时 会 提醒 为 数据 库 管 理 员 加 上 密码 ， 目 的 是 要 让 权限 管理 加 上 最 后 一 道 锁 。MyYSQL 

数据 库 默 认 是 不 为 管理 员 账 户 加 密码 的 ， 所 以 必须 在 MySQL 数据 库 调 整 后 再 回 到 
Dreamweaver CC 时 修改 设置 ， 在 下 一 节 中 我 们 会 说 明 这 个 重点 。 


22.3.3 ”案例 8 一 一 绑 定 记录 集 


在 建立 连接 后 ， 必 须 建 立 记 录 集 才能 进行 相关 的 记录 操作 。 在 这 一 节 中 ， 将 学 习 如 何在 
建立 连接 之 后 添加 记录 集 。 
所 谓 记 录 集 ， 就 是 将 数据 库 中 的 数据 表 按照 要 求 来 筛选 、 排 序 整理 出 来 的 数据 。 用 户 可 
以 在 【 绑 定 】 面 板 中 进行 操作 。 有 具体 操作 步骤 如 下 。_ 
EECJD 切换 到 【 绑 定 】 面 板 ， 单 击 该 面板 的 二 按钮， 在 弹出 的 菜单 中 选择 【记录 集 ( 查 
询 )】 命 令 ， 如 图 22-63 所 示 。 
EDp 打开 【记录 集 】 对 话 框 ， 输 入 记录 集 名 称 ， 选 择 使 用 的 连接 为 company， 选 择 
使 用 的 数据 表 为 employee， 选 中 【全 部 】 单 选 按钮 ， 显 示 全 部 字段 ， 如 图 22-64 
所 示 。 





册 江 内 19SAW 末 窒 一 一 漠 内 兴 部 导 习 寺 过 条 闸 ， 册 ZZ 小 二 
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‘45 二 
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EE- 地 
司 [ER El 
和 | 测 
EE 
~ [ wn 
22-63 ”选择 【记录 集 ( 查 询 )】 命 令 22-64 【记录 集 】 对 话 框 


ES 单 击 【 测 试 】 按 钮 来 测试 连接 结果 ， 此 时 打开 【测试 SQL 指令 】 对 话 框 ， 上 面 
显示 了 数据 库 中 的 所 有 数据 ， 如 图 22-65 所 示 。 














WtsQLS x 
记录 ea ee emSex eaBirthdey eaEnail ophemne onkddrass 
1 Jo00 人 1992-90-02 pinggue... 0992-12，， ?91127 
3 0 9m ? 1972-36-t2 wangpit .. 0992-12. ?77199 
3 J00B 7 ? 1972-06-t2 。 zhenghw .. p92-12. . ?93209 
4 30004 全 ? 1902-99-02 wagfei... 0992-12. T7717 
5 1006 7 了? 1978-06-(2 yungker. .. 0992-12. .779209 
6 0006 nm ? 1982-93-20 fengfsi U992-12. ,777429 
< > 
Mf) | Tet 








22-65 【测试 SQL 指令 】 对 话 框 


EEC 单 击 【 确 定 】 按 钮 ， 返 回 【记录 集 】 对 话 框 ， 再 次 单 击 【 确 定 】 按 钮 ， 即 可 完 
成 记录 集 的 绑 定 。 

EECRD 在 【 绑 定 】 面 板 上 出 现 上 面 设 置 的 记录 集 名 称 Reccompany， 展 开 后 将 需要 引用 
的 数据 字段 一 一 拖 昌 到 网 页 中 ， 如 图 22-66 所 示 。 


谓 cwenwwwwhevdaasheoomtr 
EE -oor am 








RE 





ED Wy ai in 本 于 r 


22-66 ” 拖 动 字段 到 网 页 中 
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EECSUD 在 当前 设置 中 ， 若 是 预览 ， 只 会 读 出 数据 库 的 第 一 笔 数据 ， 我 们 需要 设置 重复 
区 域 ， 将 所 有 数据 一 一 读 出 。 首 先 要 选取 设置 重复 的 区 域 。 在 【服务 器 行为 】 面 板 
中 单 击 + 号 按钮 ， 在 弹出 的 菜单 中 选择 【重复 区 域 】 命 令 ， 如 图 22-67 所 示 。 


函 cwampwwmshowdatapno prMDr 
lt zt 













器 上 的 <ul> 标 签 ， 选 择 需要 添加 重复 区 域 的 行 = se 
| 1 3. 选 择 【重复 


员工 师 呈 站 名 性别 ES 电子 








六 当 此 TDSAN 演 定 一 -并 屋 让 讯号 习 斌 过 阴 将 者 ZZ 波 





es ! 区 域 】 命令 
ME - I 
图 22-67 设置 重复 区 域 
ET 在 打开 的 【重复 区 域 】 对 话 框 中 设 N 
置 【 显 示 】 为 【所 有 记录 】 来 显示 所 有 | NS 
数据 ， 单 击 【 确 定 】 按 钮 ， 如 图 22-68 | ap [ermzy 二 
所 示 。 时 未 〇 10 记录 一 


ET 设置 完毕 后 ， 在 表格 上 方 可 以 看 到 ws 

【重复 】 灰 色 标 签 ， 如 图 22-69 所 示 。 
EE 选择 【文件 】 一 【保存 】 命 令 保存 

该 网 页 ， 按 F12 键 即 可 预览 效果 ， 如 图 22-68 【重复 区 域 】 对话 框 
图 22-70 所 示 。 




















-和 料 创 网 络 科技 有 限 公司 员工 信息 表 … 








{Recconpany. enID} {Recconpany. cnliane} {Recconpany. caSex} {Recconpany. cnBirthday} cconpany. cnEnail} {Recconpany. cnPhone} {Re 


图 22-69 添加 【重复 】 标 签 
科 创 网 络 科技 有 限 公司 员工 信息 表 





10001 各 ? 1982-06-02 inggao8l163 com 0992-1234567 ?0129 
10002 09 ? 1972-06-02 。。 vangxiaomin8163. com 0982-1234560 17197 
10003 mn ? 1970-06-02 shanghusdl63. com C0992-1234561 19207 
10004 mn + 1982-03-02 ‘wangfeiQl63. com 0992-1234582 99119 
10005 nm ? 1978-06-02 angkanga163. con C0992-1234568 ?979209 
10008 2209 ? 1982-03-20 2 fengfeifeial63 con 0992-1234512 ‘990429 


22-70 ”网 页 预览 效果 
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EED 细心 的 读者 会 发 现 ， 所 有 牵涉 到 中 文字 符 的 显示 都 为 ? 号 ， 这 是 由 于 编码 不 同 
造成 的 。 下 面 设置 数据 库 连接 文件 的 编码 为 简体 中 文 。 在 【文件 】 面 板 的 
connections 文件 夹 下 打开 数据 库 连 接 文件 companyphp， 切 换 到 代码 视图 ， 添 加 以 下 
代码 ( 见 图 22-71): 


mysql query("set character set 'gb2312'");// 读 数据 库 编 码 
mysql query("set names 'gb2312'");// 写 数据 库 编码 





二 cwampwwwconnections\company php* - 





ny, 
Spa any) or trigger. R_ERROR); 
19 mysql_query("set character set 'gb2312'");/ /该 灶 据 库 沪 


1 mysql_query("set names 'gb2312'"); 
?> 




















图 22-71 添加 代码 
本 于 选择 【文件 】 一 【保存 】 命 令 保存 该 网 页 ， 按 F12 键 即 可 预览 修改 后 的 效果 ， 
如 图 22-72 所 示 。 
科 创 网 络 科技 有 限 公司 员工 信息 表 





男 1982-06-02 Tinggao8163. com 0992-1234567 长 鸣 路 12 号 
10002 王 小 租 女 1972-06-02 。。 wangxisoaina163 com 0992-1234560 西 华 街 19 呈 
10003 张 毕 男 1970-06-02 zhanghua8163. com 0992-1234561 长 安 路 20 呈 
10004 王 草 女 1982-03-02 ‘wanefeiQlé3. com 0992-1234582 江 隆 竺 1 号 
10005 杨康 男 1976-06-02 yngjantal63 com 。 0992-1234568 长 安 街 20 呈 
10006 忆 革 菲 Ca 1982-03-20 fengfeifeiQl63. com 0992-1234512 长 安 街 42 号 


22-72 ”修改 后 的 效果 


22.4 数据 库 的 备份 与 还 原 


在 MySQL 数据 库 里 ， 备 份 与 还 原 数 据 库 数 据 是 十 分 简单 而 又 轻松 的 事情 。 下 面 介绍 如 
何 备份 与 还 原 MySQL 的 数据 库 。 


22.4.1 案例 9 一 一 数据 库 的 备份 


用 户 可 以 使 用 phpMyAdmin 的 管理 程序 将 数据 库 中 的 所 有 数据 表 导 出 成 一 个 单独 的 文本 
文件 。 当 数据 库 受 到 损坏 或 是 要 在 新 的 MySQL 数据 库 中 加 入 这 些 数据 时 ， 只 要 将 这 个 文本 


文件 插入 即 可 。 
以 本 章 所 使 用 的 文件 为 例 ， 先 进入 phpMyAdmin 的 管理 界面 ， 下 面 就 可 以 备份 数据 库 
了 。 具 体操 作 步 骤 如 下 。 
IY 选择 需要 导出 的 数据 库 ， 单 击 【 导 出 】 i di 页 ， 如 图 22-73 所 示 。 
Bhp MA i 


人 鳃 马 者 四 9 
| (最 过 合用 的 素 ) 加 | 





入 
J br 目 employee 司 济 右 六 站 和 全 要 寺 有 括 入 映 青 全 @ 刚 除 -6 InnoDB tn1 | 
| 2 Re 1 张 表 总 计 6 InnoDB latin1. 
审 刁 information_schema 
外 mysql 下 一 一 一 一 
申 j perfbrmance_ schema 人 目 全 过 选中 项 : 国 


团 司 tost 





局 1TEpHRS 本 到 扫 字 奥 
22-73 ”选择 要 导出 的 数据 库 


ED 选择 导出 方式 为 【快速 -显示 最 少 的 选项 】， 单 击 【 执 行 】 按 钮 ， 如 图 22-74 所 示 。 
EEIRS 打开 【另存 为 】 对话 框 ， 在 其 中 输入 保存 文件 的 名 称 ， 设 置 保存 的 类 型 及 位 
置 ， 如 图 22-75 所 示 。 


个 入 ,ki ，T 芝 ， ~ 志 家 载 
认 引 ” 。 新 于 部 件 实 tv 四 
8 、 人 次 所 央 a 
0 A60 Drive phpMyAdmin-47.2-cll-languages 20177181704 。 文件 天 


正在 导出 数据 库 “company" 中 的 数据 表 SE 
EAR: | 


加 快 诗 - 亚 下 最 中 的 过 而 
上 日 室 -显示 了 再 可 网 明寺 让 








是 “~ ak Css Ew 








22-74 ”选择 导出 方式 图 22-75 【另存 为 】 对 话 框 


Se MySQL 备份 下 的 文件 是 扩展 名 为 *.sql 的 文本 文件 ， 这 样 的 备份 操作 不 仅 简 单 ， 
羡 文件 内 容 也 较 小 。 


22.4.2 ”案例 10 一 一 数据 库 的 还 原 


还 原 数 据 库 文件 的 具体 操作 步骤 如 下 。 

EEC 在 执行 数据 库 的 还 原 前 ， 必 须 将 原来 的 数据 表 删 除 。 单 击 employee 数据 表 右 侧 
的 【删除 】 链 接 ， 如 图 22-76 所 示 。 

EEIPe 此 时 会 弹出 一 个 信息 提示 框 ， 单 击 【 确 定 】 按 钮 ， 如 图 22-77 所 示 。 


刑 沸 溢 1DSAW 酒 售 一 一 满 潍 硝 训 其 习 济 半 淫 首 ” 需 ZZ 小 鲁 
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一 本 


3 扩 结构 加 SQL 人 搜索 辐 查 和 妃 SU 加 SA 因 














去 -。。 报 作 行 数 | 
i 完 : ， 你 "| 
口 employee 浏览 jy 结构 吉 接 索 也 插入 狂 青 空 es ~ 人 您 真 的 要 执行 "DROP 
1 对 人 = = 





[| ms 


个 回 全 选 选中 项 : 国 











22-76 ” 单 击 【删除 】 链 接 22-77 ”信息 提示 框 


EDUE) 回 到 原 界面 ， 会 发 觉 该 数据 表 已 经 被 删除 了 ， 如 图 22-78 所 示 。 
EZY 接着 要 插入 刚才 备份 的 <company sql> 文 件 ， 将 该 数据 表 还 原 。 单 击 【 导 入 】 链 
接 ， 打 开 【 要 导入 的 文件 】 界 面 ， 如 图 22-79 所 示 。 


车 明秀 器 :mysql wampaorver » 独 孝 拒 后 company 
的 结 网 局 SQL 入 搜索 避 坦 询 避 Sd 辐 SA 让 并 作 





导入 到 数据 库 "company” 





-EDITRTTTTTTTTTTTTTTT 7 








结构 眉 SQL 尺 搜索 本 查询 可 SU 加 导入 








表 。 报 作 行 数 古 类 型 排序 则 大 小 多余 er hE ap 
0 张 表 总 计 0 InnoDB latin1_swedish_ci 0 字 节 0 字 节 从 计算 机 中 上 传 = [ER ( 具 大 限 村 128 MB) 
企 _ 回 全 选 。。 | 选中 项 : 加 文 并 的 衬 六 重 : | uf8 国 

图 22-78 删除 了 数据 表 图 22-79 【要 导入 的 文件 】 界 面 


ED 单 击 界面 中 的 【浏览 】 按 钮 ， 打 开 【 选 择 要 加 载 的 文件 】 对 话 框 ， 选 择 上 面 保 
存 的 文本 文件 company.sql， 单 击 【 打 开 】 按 钮 ， 如 图 22-80 所 示 。 





风 要 i 的 文件 x 
< ~ 不同 < wamp > ww > v 局 理 要 ww- 忆 

组 织 ” 。 新 建文 和 交 Er me 

而 OneDive 。 ^ 和 修改 日 其 类 型 ”入 
加 此 入 _mmServerScripts 2017/711817:58 。 文件 实 
rotes 201717118 18:51 。 文件 实 





A360 Drive 


Connections 2017/7118 19:01 去 

















图 视 贞 phpMyadmin 20T71711a1705 。 文人 天 
局 图 上 i 2017/71811:54 。 文 从 
图 阅 wampthemes 2017/7/1811:54 。 文件 交 
让 口 add vhostphp zolara1l61a0z 。 PHpile 
3 [DD companysql 2017/711819:05 。 SQL 文件 
@ fmiconico 2010112/31940 国标 Y 
国 点 昌 mw 
文件 和 (Nj: | companysql ~| [Wi 文件 可 
[| 





22-80 【选择 要 加 载 的 文件 】 对 话 框 


ET 单 击 【 执 行 】 按 钮 ， 系 统 即 会 读 取 company.sql 文件 中 所 记录 的 指令 与 数据 ， 将 
数据 表 恢 复 ， 如 图 22-81 所 示 。 

EC 在 执行 完毕 后 ，company 数据 库 中 又 出 现 了 一 个 数据 表 employee， 如 图 22-82 
所 示 。 


导入 到 数据 库 "company” 


要 导入 的 文件 : 


文件 可 及 已 和约 (pip, bzip2. zip) 受 示 甘 入 ~ 
下 量 Y 作 名 此 五 内 兽 丽 本 生 方 本 灌区 -各 : sqlzip 


上 苇 : CUsersWaminisvatoru [ES (大 大 限定 : 128 NB) 














档 式 特定 大 





SL 贰 到 模式 ;| NONE a 
园 不 要 续 要 全 合同 自 增 (acro_zSCRaxarzl 


[< 


图 22-81 开始 执行 导入 操作 
一 ET FT 


了 sk 结 构 司 SQL 尺 搜 索 可 坦 鹿 医 呈 出 辐 呈 入 六 报 作 下 权限 侈 程序 1 





表 ~ 操作 行 数 二 类 型 ”排序 规则 大 小 
回 employee 加 浏览 用 结构 仿 搜索 了 括 入 雹 青空 合 出 除 -6 InnoDB latin1_swedish ci 16 KB 

1 张 表 。 总 计 6 InnoDB latin1_swedish_ci 16 KB 
企 _ 回 全 选 选中 项 了 = 

















图 22-82 导入 的 数据 表 


22.5 ”综合 案例 一 一 给 我 的 MySQL 数据 库 加 密 


MySQL 数据 库 是 存在 于 网 络 上 的 数据 库 系统 。 只 要 是 网 络 用 户 ， 都 可 以 连接 到 这 个 资 
源 。 如 果 没 有 权限 或 其 他 措施 ， 任 何人 都 可 以 对 MySQL 数据 库 进 行 存 取 。MySQL 数据 库 在 
安装 完毕 后 ， 默 认 是 完全 不 设防 的 ， 也 就 是 任何 人 都 可 以 不 使 用 密码 就 连接 到 MySQL 数据 
库 。 这 是 一 个 相当 危险 的 安全 漏洞 。 

1. phpMyAdmin 管理 程序 的 安全 考虑 

phpMyAdmin 是 一 套 网 页 界面 的 MySQL 管理 程序 。 有 许多 PHP 的 程序 设计 师 都 会 将 这 
套 工具 直接 上 传 到 他 的 PHP 网 站 文件 夹 里 ， 管 理 员 只 能 从 远 端 通过 浏览 器 登录 phpMyAdmin 
来 管理 数据 库 。 

这 个 方便 的 管理 工具 是 否 也 是 方便 的 入 侵 工具 呢 ? 没 错 。 只 要 是 对 phpMyAdmin 管理 较 
为 熟悉 的 朋友 ， 看 到 该 网 站 是 使 用 PHP+MySQL 的 互动 架构 ， 都 会 去 测试 该 网 站 
<phpMyAdmin> 的 文件 夹 是 否 安 装 了 phpMyAdmin 管理 程序 。 若 是 网 站 管理 员 一 时 朴 忽 ， 很 
容易 让 人 猜 中 ， 进 入 该 网 站 的 数据 库 。 


2. 防 堵 安 全 漏洞 的 建议 
无 论 是 MySQL 数据 库 本 身 的 权限 设置 ， 还 是 pppMyAdmin 管理 程序 的 安全 漏洞 ， 为 了 
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避免 他 人 通过 网 络 入 侵 数据 库 ， 必 须要 先 做 以 下 几 件 事 。 

(1) 修改 phpMyAdmin 管理 程序 的 文件 夹 名 称 。 这 个 做 法 虽然 简单 ， 但 至 少 已 经 挡 掉 一 
大 半 非 法 入 侵 者 了 。 最 好 是 修改 成 不 容易 猜 到 ， 与 管理 或 是 MySQL、phpMyAdmin 等 关键 字 
无 关 的 文件 夹 名 称 。 

(2) 为 MySQL 数据 库 的 管理 账号 加 上 密码 。 我 们 一 再 提 到 MySQL 数据 库 的 管理 账号 
root， 默 认 是 不 设 任何 密码 的 ， 这 就 好 像 装 了 安全 系统 ， 却 没 打 开 电 源 开 关 一 样 。 因 此 ， 蔡 
root 加 上 密码 是 相当 重要 的 。 

(3) 养 成 备份 MySQL 数据 库 的 习惯 。 一 旦 用 户 所 有 安全 措施 都 失效 了 ， 若 平常 就 有 备 
份 的 习惯 ， 即 使 数据 被 删除 了 ， 还 能 很 轻松 地 恢复 。 


3. 为 MySQL 管理 账号 加 上 密码 
在 MySQL 数据 库 中 的 管理 员 账 号 为 root， 为 了 保护 数据 库 账 号 的 安全 ， 我 们 可 以 为 管理 
员 账 号 加 密 。 有 具体 操作 步骤 如 下 。 


E53IP 进入 phpMyAdmin 的 管理 主 界面 ， 单 击 【权限 】 文 字 链接 ， 来 设置 管理 员 账 号 
的 权限 ， 如 图 22-83 所 示 。 






j 查询 加 S 出 加 SA 六 所 作 。 了 更 多 
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1 张 表 。 皇 计 6 InnoDB latin1_swedish_ci 16 0 
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个 回 全 和 造 中 项 : 














图 22-83 ”设置 管理 员 密 码 


ES 这 里 有 两 个 root 账号 ， 分 别 为 由 本 机 (localhost) 进 入 和 所 有 主机 (: : 1) 进 入 的 管 
理 账 号 ， 默 认 没 有 密码 。 首 先 修改 所 有 主机 的 密码 ， 单 击 【 编 辑 权限 】 链 接 ， 进 入 
下 一 页 ， 如 图 22-84 所 示 。 





| 类 二 局 SQL 搜索 导 坦 询 因 呈 LE 引导 NA wj 损 作 时 权限 v 更 多 


| 局 用 户 可 以 访 癌 'company” | 


用 户主 机 类 型 权限 桥 权 所作 
root 127.001 全 局 ALL earviLEcEs 是 克 编 外 中 





22-84 ” 单 击 【 编 辑 权 限 】 链 接 


EERe 在 打开 的 界面 中 的 【密码 】 文 本 框 中 输入 所 要 使 用 的 密码 ， 如 图 22-85 所 示 。 单 
击 【 执 行 】 按 钮 ， 即 可 添加 密码 。 








二 吾 再 : | 重新 输入 : 


定 吕 类 宇 方式 @ NySQL 4.1+ 
日 MySQL 40 荐 


sr | 








22-85 ”添加 密码 


med 在 修改 完毕 之 后 ， 可 以 重新 登录 管理 界面 ， 就 可 以 正常 使 用 MySQL 数据 库 的 资 
半 。 源 了 。 修 改过 数据 库 密码 之 后 ， 需 要 同时 修改 网 站 的 数据 库 连接 设置 设置 root 密码 
为 相应 密码 即 可 。 


册 江 内 1DSAW 于 让 一 一 灌 炎 只 部 红 司 寺 起 午间“ 册 ZZ 游 前 


22.6 疑难 解 惑 


疑问 1: 预览 网 页 时 提示 如 图 22-86 所 示 的 警告 信息 ， 如 何 解决 ? 


画 - @ hnpyioahossrovdaephp P+ ©|@locahos 
文人 D。 乔 肌 昌 。 百 看 W 收工 上 Tm 二) 

















图 22-86 警告 信息 


答 : 出 现 图 22-86 中 的 警告 信息 ， 主 要 是 因为 在 从 MySQL 5.5 版 本 开始 ， 提 示 用 户 
mysql_connect 这 个 模块 将 在 未 来 弃 用 ， 请 使 用 mysqli 或 者 PDO 来 奉 代 。 用 户 可 以 使 用 以 下 
几 个 方法 之 一 来 解决 。 

(1) 禁止 PHP 报错 。 

在 PHP 的 设置 文件 php.ini 中 将 报错 取消 ， 在 该 文件 中 找到 : display_errors = On， 修 改 为 
display_errors = Off。 修 改 后 需要 重新 启动 服务 器 才能 生效 。 

(2) 修改 连接 语句 。 

将 类 似 以 下 连接 语句 : 

$1link = mysql connect('localhost', 'user', 'password'); 

mysql select db('dbname', $link); 
修改 如 下 : 


$link = mysqli connect('localhost', 'user', 'password', 'dbname'); 


和 
s03@ 
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(3) 设置 报警 级 别 。 

在 PHP 程序 中 添加 如 下 代码 ， 从 而 设置 报警 级 别 : 
<?php 

error reporting(E ALL ^ E DEPRECATED); 


疑问 2: 如 何 导 出 制定 的 数据 表 ? 
答 : 如 果 用 户 想 导出 制定 的 数据 表 ， 在 选择 导出 方式 时 ， 选 中 【 自 定义 -显示 所 有 可 用 的 
选项 】 单 选 按钮 ， 然 后 在 【数据 表 】 列 表 中 选择 需要 导出 的 数据 表 即 可 ， 如 图 22-87 所 示 。 
导出 方式 : 


目 快速 -显示 最 少 的 选项 
加 | 自 定 义 - 显示 所 有 可 用 的 选项 








NS 数据 表 : 


全 选 /全 不 先 








图 22-87 设置 导出 方式 


第 23 章 
开启 动态 网 站 制作 


之 路 一 一 动态 网 站 
应 用 模块 开发 


在 开发 动态 网 站 的 过 程 中 ， 开 发 人 员 经 常会 遇 到 要 添加 需要 的 应 用 模块 的 问 
题 。 所 以 本 章 将 介绍 常见 动态 应 用 模块 的 开发 方法 和 技巧 ， 包 括 在 线 点 播 模 块 的 开 
发 、 网 页 搜索 模块 的 开发 、 在 线 支 付 模块 的 开发 、 在 线 客 服 模 块 的 开发 和 天 气 预 报 
模块 的 开发 。 
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23.1 网 站 模块 的 概念 


模块 是 指 在 程序 设计 中 ， 为 完成 某 一 功能 所 需 的 一 段 程序 或 子 程序 ;或 是 指 能 由 编译 程 
序 、 装 配 程序 等 处 理 的 独立 程序 单位 ; 或 是 指 大 型 软件 系统 的 一 部 分 。 网 站 模块 是 指 在 网 站 
制作 中 能 完成 某 一 功能 所 需 的 一 段 程序 或 子 程序 。 

在 网 站 建设 中 ， 经 常用 到 的 一 些 功能 如 在 线 客 服 、 在 线 播放 、 搜 索 、 天 气 预报 等 ， 称 
为 常用 功能 。 这 些 功能 具有 很 好 的 通用 性 ， 在 学 习 掌握 之 后 可 以 直接 拿 来 用 到 自己 的 网 站 建 
设 中 。 


信 
网 
站 
i 
发 
案 
例 
课 





23.2 ”常用 动态 网 站 模块 开发 
下 面 介绍 常见 动态 网 站 模块 的 开发 过 程 。 
23.2.1 案例 1 一 一 在 线 点 播 模块 开发 


在 线 点 播 不 仅 能 实现 视频 播放 功能 ， 而 且 可 以 实 
现 许 多 有 用 的 辅助 功能 ， 如 控制 播放 器 窗口 状态 、 开 
启 声 音 等 。 

在 线 点 播 模块 的 运行 效果 如 图 23-1 所 示 。 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 
sp\index.php， 双 击 将 其 打开 ,编辑 区 如 图 23-2 所 
示 。 从 code.txt 中 复制 代码 ， 并 粘贴 到 相应 位 置 ， 如 图 23-1 在 线 点 播 模块 
图 23-3 所 示 。 
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图 23-3 ”添加 在 线 点 播 模块 代码 


23.2.2 案例 2 一 一 网 页 搜索 模块 开发 


在 浏览 网 站 时 ， 我 们 经 常 可 以 看 到 好 用 的 百度 搜索 框 
或 者 Google 搜索 框 。 如 果 在 我 们 做 的 网 站 中 加 入 这 样 的 
模块 ， 能 为 网 站 的 访客 带 来 很 大 的 便利 。 网 页 搜索 模块 的 
实现 效果 如 图 23-4 所 示 。 图 23.4 ”网 页 搜索 模块 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 ssindex.php， 双 击 
将 其 打开 ， 编 辑 区 如 图 23-5 所 示 。 从 code.txt 中 复制 代码 ， 并 粘贴 到 相应 位 置 ， 如 图 23-6 所 示 。 








me er “ 一 一 
1 KB [Fi 2 点 这 里 拆 分 显示 和 所 口语 
Q 2 es 
守 tl 和 作 便当 示例 Vest2e》 

ets htp- oom Catent Type” cont ente tert/hnl 
| 7 
5 
a sememter 

8 She heithti309pz， aartins soo ate | 
= 
vm 

ou 0 3. 将 baidu 搜索 代码 粘贴 到 此 处 

Be 
9 etiam bps/ bid em baide Morente | 
站 1 | aa pt 

| ee ei 

“hetps// Lt a Wi 

回 人 
加 外 Ew ee 
上 四国 2 

时 
ve 

yew 
Vy 

EK L 
加 se ， 
Gives Cn) I “1 攻 攻 夯 训 -509 出 术 paaol 


图 23-5 代码 编辑 区 











23-6 ”添加 网 页 搜索 模块 代码 
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23.2.3 ”案例 3 一 一 在 线 支付 模块 开发 


在 电子 商务 高 速 发 展 的 今天 ， 网 上 在 线 支付 应 用 越 来 越 广泛 ， 那 么 网 上 支付 是 怎么 实现 
的 呢 ? 多 数 的 银行 和 在 线 支 付 服务 商都 提供 了 相应 的 接口 给 用 户 使 用 ， 我 们 要 做 的 就 是 把 接 
口中 需要 的 参数 搜集 并 提交 到 接口 页 面 中 。 

在 现在 流行 的 网 站 支付 平台 中 ， 支 付 宝 占据 了 最 大 份额 。 现 在 我 们 来 看 一 下 在 支付 宝 支 
付 过 程 中 是 怎么 搜集 数据 的 。 

支付 宝 接口 文件 可 以 从 支付 宝 商 家 用 户 中 申请 获取 ， 我 们 看 一 下 在 接口 数据 中 需要 哪些 
表单 信息 。 


"serVicen => "create direct pay by user", // 交 易 类 型 
"partner" => $partner, // 合 作 商 户 号 

"return url" => $return url, / /同步 返回 

"notify url" => $notify url, // 异 步 返回 

"_input charset" => $_input charset, // 字 符 集 ， 默 认为 GBK 
"subject" => "商品 名 称 "， // 商 品名 称 ， 必 填 

"body" => "商品 描述 "， // 商 品 描述 ， 必 填 

"out_ trade no" => date (Ymdhms), // 商 品 外 部 交易 号 ， 必 填 (保证 唯一 性 ) 
"total fee" => "0.01", // 商 品 单价 ， 必 填 (价格 不 能 为 0) 
"payment_type" = // 默 认为 1， 不 需要 修改 
"show_url" => $show_ url, // 商 品 相关 网 站 

"seller email" => $seller email // 卖 家 邮箱 ， 必 填 


在 【文件 】 面 板 中 选择 要 编辑 的 网 页 zhindex: Dp al 如 图 23-7 所 示 。 
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23-7 ”在 线 支 付 模块 编辑 区 


这 里 我 们 根据 接口 需要 的 信息 进行 表单 布局 ， 并 通过 post 方便 地 把 表单 数据 提交 到 接口 
页 面 ， 在 接口 页 面 只 需要 使 用 $_post" 表 单字 段 名 "接收 这 些 提交 过 来 的 信息 就 行 了 。 


23.2.4 ”案例 4 一 一 在 线 客 服 模 块 开发 


在 线 客服 模块 在 电子 商务 网 站 的 建设 中 可 以 说 是 必 不 可 少 的 。 通 过 在 线 客服 模块 ， 可 以 
让 访客 很 方便 地 与 网 站 运营 的 客服 人 员 进 行 沟 通 交 流 ， 如 图 23-8 所 示 。 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 qq\index.php， 双 击 将 其 打开 。 切 换 到 代码 窗口 ， 可 
以 看 到 第 一 行为 qq 模块 调用 方式 ， 如 图 23-9 所 示 。 

接着 打开 模板 文件 qqphp， 找 到 修改 qq 号 码 的 地 方 ， 在 实际 应 用 中 在 这 里 修改 相应 属性 
值 就 可 以 了 ， 如 图 23-10 所 示 。 

















| 


公告: 以 下 广告 内 容 为 网 络 禾 兵 ， 广 告 内 容 并 经 伯 站 验证 ， 如 有 不 实 ， 本 站 不 负 任何 贾 任 ! 1 1 
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23-8 ”在 线 客服 模块 





indszx. php X 





CHBEY aa php 了 


[HR 下 折 分 二 设计 | 实时 视 目 。 哆 . 芭 . 星 D3 FE4 村 ae 
| 1 《3?php include( qq. php™); ?> 四 
html> 
| 


2 
3 head> 
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23-9 调用 QQ 的 代码 











| CR | 折 当 上流 汗 时 视 四 地- @. Mp EA G 和 





$on=" 在 线 ， 即 时 交谈 “; 
$off=" 不 在 线 ， 请 留言 “; 


图 23-10 修改 代码 


23.2.5 ”案例 5 一 一 天 气 预报 模块 开发 


天 气 预报 模块 对 一 些 办 公 性 质 的 网 站 来 说 也 是 很 有 用 的 ， 它 可 以 通过 一 些 天 气 网 站 提供 
的 相关 代码 来 实现 。 下 面 一 段 代码 是 由 中 国 天 气 网 提供 的 调用 代码 : 


<iframe src="http://m.weather.com.cn/m/pnl2/weather.htm " width="245" 

height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" 

frameborder="0" scrolling="no"></iframe> 

在 使 用 的 时 候 我 们 只 需要 把 这 段 代码 放 入 需要 设置 的 地 方 就 行 了 。 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 tqindex.php， 双 击 将 其 打开 。 切 换 到 拆 分 窗口 ， 如 
图 23-11 所 示 。 

添加 完 天 气 预 报 模块 的 代码 后 ， 就 可 以 保存 该 网 页 。 然 后 在 正 浏览 器 中 预览 网 页 ， 可 以 
看 到 天 气 预报 模块 的 显示 效果 ， 如 图 23-12 所 示 。 
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23-11 ”天气 预 报 模块 编辑 区 
广告 管理 系统 演示 


后 各 管理 





图 23-12 ”天气 预报 模块 预览 效果 


23.3 疑难 解 惑 


疑问 1: include 与 require 的 区 别 是 什么 ? 


答 : require 从 字面 上 理解 就 是 “要 求 ”， 所 以 是 必须 执行 ， 并 且 在 其 他 输出 之 前 执行 。 
如 果 该 文件 执行 错误 ， 整 个 页 面 就 会 出 错 无 法 继续 执行 。 而 在 实际 编程 中 会 遇 到 一 个 页 面 调 
用 多 个 页 面 的 情况 ， 可 能 出 现 嵌 套 调 用 、 重 复 调 用 ， 所 以 就 要 用 到 require_once 以 避免 重复 调 
用 引起 的 错误 。 例 如 ， 连 接 数 据 库 经 常用 到 的 conn.php 页 面 。 

include 是 在 一 个 程序 执行 到 一 定 的 时 候 包 含 进 另 一 个 文件 的 程序 ， 相 当 于 将 它 作 为 当前 
程序 的 一 部 分 。 

require 和 include 都 是 调用 另外 的 页 面 程序 ， 但 require 是 强制 执行 ，include 可 以 选择 执行 。 

疑问 2: RSS 模块 是 什么 ? 


答 : RSS 是 站 点 用 来 和 其 他 站 点 之 间 共 享 内 容 的 简易 方式 (也 叫 聚 合 内 容 )。RSS 使 用 
XML 作为 彼此 共享 内 容 的 标准 方式 。 它 能 让 别人 很 容易 地 发 现 你 已 经 更 新 了 你 的 站 点 ， 并 让 
人 们 很 容易 地 追踪 他 们 阅读 的 所 有 信息 。 所 以 在 自己 的 网 站 上 加 上 这 个 模块 ， 能 提高 用 户 对 
网 站 的 关注 。 一 个 完整 的 RSS 模块 由 两 个 部 分 组 成 : 一 是 信息 提交 ; 二 是 更 新 RSS 文件 。 


yy 
第 6 篇 
网 站 开发 实战 


外 第 24 章 综合 应 用 案例 1 一 一 开发 网 站 用 户 管理 系统 
和 第 25 章 综合 应 用 案例 2 一 一 开发 信息 资讯 管理 系统 


第 24 章 
综合 应 用 案例 1 一 一 
开发 网 站 用 户 
管理 系统 


在 动态 网 站 中 ， 用 户 管理 系统 是 非常 必要 的 。 网 站 会 员 的 收集 与 数据 使 用 ， 不 
仅 可 以 让 网 站 累积 会 员 人 脉 ， 利 用 这 些 会 员 的 数据 ， 也 可 能 为 网 站 带 来 无 穷 的 商 
机 。 一 个 典型 的 网 站 会 员 管理 系统 ， 一 般 应 该 具备 用 户 注册 功能 、 资 料 修改 功能 、 
取 回 密码 功能 以 及 用 户 注 销 身份 功能 等 。 
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24.1 系统 的 功能 分 析 


在 开发 动态 网 站 之 前 ， 需 要 规划 系统 的 功能 和 各 个 页 面 之 间 的 关系 ， 绘 制 出 系统 脉络 
图 ， 从 而 方便 后 面 整 个 系统 的 开发 与 制作 。 


24.1.1 规划 网 页 结构 和 功能 
本 章 将 要 制作 的 用 户 管理 系统 的 网 页 及 网 页 结构 如 图 24-1 所 示 。 


用 户 管理 系统 



























找 回 密码 修改 资料 模块 








用 户 登 录 模 块 


















loginfail.php 












































welcome.php 
lostpassword.php userupdate.php 
新 用 户 注册 页 面 I 
register.php showquestion php userupdateok.php 
EE 一 
regfail. php regok.php | |showpassword php logoot. php 
































24-1 ”系统 结构 


本 系统 的 主要 结构 分 为 用 户 登录 和 找 回 密码 两 个 部 分 。 整 个 系统 中 共有 12 个 页 面 ， 各 个 
页 面 的 名 称 和 对 应 的 文件 名 、 功 能 如 表 24-1 所 示 。 


表 24-1 用 户 管理 系统 网 页 设计 






































页 面 名 称 功 能 
index.php 实现 用 户 管理 系统 的 登录 功能 的 页 面 
welcome.php 用 户 登 录 成 功 后 显示 的 页 面 
Ioginfail php 用 户 登 录 失 败 后 显示 的 页 面 
register.php 新 用 户 用 来 注册 输入 个 人 信息 的 页 面 
regok php 新 用 户 注册 成 功 后 显示 的 页 面 
regfail php 新 用 户 注册 失败 后 显示 的 页 面 
lostpassword.php 丢失 密码 后 进行 密码 查询 使 用 的 页 面 
showquestion.php 查询 密码 时 输入 提示 问题 的 页 面 
showpassword.php 答对 查询 密码 问题 后 显示 的 页 面 
userupdate. php 修改 用 户 资料 的 页 面 
userupdateok.php 成 功 更 新 用 户 资料 后 显示 的 页 面 
logoot.php 退出 用 户 系统 的 页 面 


全 





24.1.2 ”网 页 设计 规划 


在 本 地 站 点 建立 站 点 文件 夹 member， 将 要 建立 制作 网 站 用 户 管理 系统 的 文件 和 文件 夹 ， 
如 图 24-2 所 示 。 
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24-2 ”规划 站 点 文件 和 文件 夹 
24.1.3 ”网 页 美工 设计 


本 实例 整体 框架 采用 “拐角 型 ”布局 结构 ， 美 工 设计 效果 如 图 24-3 和 图 24-4 所 示 。 初 学 
者 在 设计 制作 过 程 中 ， 可 以 打开 素材 中 的 源 代码 ， 找 到 相关 站 点 的 images( 图 片 ) 文 件 夹 ， 其 中 
放置 了 已 经 编辑 好 的 图 片 。 


让 食 香 采购 更 加 简单 
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24-3 首页 的 美工 24-4 “会员 注册 页 面 的 美工 


24.2 数据库 设计 与 连接 


本 节 主 要 讲述 如 何 使 用 phpMyAdmin 建立 用 户 管理 系统 的 数据 库 ， 如 何 使 用 
Dreamweaver 在 数据 库 与 网 站 之 间 建 立 动态 连接 。 


和 
ss5@ 
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24.2.1 数据 库 设 计 


通过 对 用 户 管理 系统 的 功能 分 析 发 现 ， 这 个 数据 库 应 该 包括 注册 的 用 户 名 、 注 册 密 码 以 
及 个 人 信息 ， 如 性 别 、 年 龄 、e-mail、 电 话 等 。 所 以 在 数据 库 中 必须 包含 一 个 容纳 上 述 信息 的 
表 ， 被 称 为 “用 户 信 息 表 ”。 本 案例 将 数据 库 命 名 为 member， 创 建 的 用 户 信息 表 member 结 
构 如 表 24-2 所 示 。 


表 24-2 用 户 信息 表 member 


字段 描述 主键 | 非 空 | 唯 | 自 增 
用 户 编号 |p lm | 是 | 是 | 是 | 是 
用 户 账号 | wemanme | vagcHaRon | 五 | 是 | 吾 | 再 
用 户 密码 | password | vaRCHAR(20 | 天 | 是 | 否 | 否 
志 克 办 提 二 二 | question ”| vagcaR(s0) ”| 五 ”| 是 ”| 五 ”| 再 
密码 提示 问题 答案 | answer ”| VARCHAR(50) ”| 否 | 是 | 否 | 否 
真实 姓名 | mename |varcHarGo | 否 | 是 | 否 | 否 
用 户 性 别 | | vagcHaRe 是 | 否 | 否 
用 户 地 址 | aqdress | vaRcHAR(I00) | 五 | 是 | 否 | 再 
联系 电话 [四 | vagcHaRauom | 否 | 是 | 是 | 否 
QQ 号 码 [ao |varcHaraoo) | 否 | 五 | 是 | 理 
邮箱 地 址 | email |varcHAR(0) | 否 | 大 | 是 | 理 
用 户 权限 | ahorty ”| vagcHaRn | 五 | 是 | 下 | 再 








创建 数据 库 的 具体 操作 步骤 如 下 。 
ES 启动 phppMyAdmin， 在 主 界面 的 左 侧 列表 中 单 击 New 链接 ， 如 图 24-5 所 示 。 
phpMyAdmin |- WEEIOT EE 


j 上 SO 启 HS 呈 NP 豆 SU 可 SA WE rs 
二 肌 关 到 这 当 才 厅 RM 一 “BS emp 


(2 
- Pe so 
5 














~ Apacher2 49 (Wna2) PHPASS 12 
到 委 珠 吕 户 类 术 : Bbmyeql 
mysqnd5 9 1-dew ~ 20120503 


eadson ceas7eien 108723207 09 


-PNP ne © 





24-5 ” phpMyAdmin 工作 界面 


EEJPpy 在 文本 框 中 输入 要 创建 数据 库 的 名 称 member， 然 后 单 击 【 创 建 】 按 钮 ， 如 图 24-6 
所 示 。 





mysql wampserver 


让 数据 库 加 SQL 荐 扒 术 = 用户 如 Ss 晤 SA 证 


[member 排 友 规则 = 




















24-6 ”创建 数据 库 member 


EETE> 接着 就 要 回 到 phpMyAdmin 的 管理 界面 ， 为 MySQL 中 的 member 数据 库 添加 数 
据 表 。 在 左 侧 列表 中 选择 创建 的 member 数据 库 ， 然 后 在 右 侧 的 页 面 中 输入 添加 的 
数据 表 名 称 和 字段 数 ， 然 后 单 击 【执行 】 按 钮 ， 如 图 24-7 所 示 。 


phpMyAdmin |。 局 彼 务 器 :mys qf wompserver » 1 用 据 诛 : member 
人 BOTe 四 SOL 夺 拉 EN 国 S4 辐 SA vy 


[ 借 过 集 用 及 对 ) 国有 sae 中 没 和 去 
SNew 
company 
informatlon_schema | 
HU member [no | 字 IRh: [12 | 
让 | 区 
由 曲 nowe 
南 - perbmance_scheme 
BW test 5 





。 宰 新 奸 吉 扫 者 上 








图 24-7 新 建 数据 表 member 
请 按照 表 24-2 0 添加 的 数据 表 字 段 如 图 24-8 所 示 。 
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[ae 国 | 2 一 了 J] 医 加 arowmw 国 [ 国 日 [- 国 吕 让 一 
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24-8 ”添加 数据 表 字 段 


EY 在 设置 完毕 之 后 ， 单 击 【保存 】 按 钮 ， 即 可 查看 member 数据 表 ， 如 图 24-9 
所 示 。 
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转注 扩 结 鬼 与 SQL 








着 名字 类 型 排 床 极 则 属性 空转 认 椭 外 振作 
下 1 到 iu) se 机 无 。 AUTO_INCREMENT oF 闪避 
EE 2 usemame varchar(20) gb2312_chinese_ci 否 无 个 改 
蕊 “3 password varchar(20) inase 5 亚 至 人 下 
万 4 qoestion varchar(50) gb2312 chinese_ci 否 无 人 下 
EE 5 answer varchar(s0) gb2312 chinese_ci 否 无 Em 
EE 6 tuoname varchar(20) gb2312_chinose_ci 否 无 Em 
7 sex varchai(2) gb2312_chinese_ci 吾 云 lt 
EE 8 address varchar(100) gb2312_chinese_ci 要 无 7 候 隐 
EE ot varchar(100) gb2312_chinese_ci 于 去 外 下 
Duaa varchar(100) gb2312_chinese_cl 是 RULL Ek 
加 11 emal 。 varchar(50) gb2312_chinese_ci 是 NULL SR 
12 aathoriy varchar(4) gb2312_chinose ei 本 去 Em 


24-9 member 数据 表 


EECDRUD 选择 member 数据 表 ， 单 击 菜单 栏 中 的 【插入 】 链 接 。 依 照 字段 的 顺序 ， 将 对 应 
的 数值 依次 输入 ， 单 击 【 执 行 】 按 钮 ， 即 可 插入 数据 ， 如 图 24-10 所 示 。 








国语 六 才 移 避 SQL 入 裤 案 天 所 A 区 SL 纪 SA 5 权限 少 报 作 35 扣发 器 














类 型 国政 空竹 
ID inte) unsioned | 国友 
usemame varchar(20) 加 | 了 
password varchar(20) 国 rm | 
Se 国 | | 你 晤 好 的 朋友 星 ? | 
answer 。 varchar(50) 国 FRI ] 
me i 国语 
sex varcharl2) 加 项 
address verchar(100) [3 EE 
varchar(100) | 国 。 1005 5 
aa 。 varhar(100) las 
mall varchar(50) vv 国 回 [三 min@163 com 
avthorly varchar(4) So 
图 24-10 插入 数据 
SEO 按照 图 24-11 所 示 的 数据 ， 重 复 执行 上 一 步 的 操作 ， 将 数据 输入 到 数据 表 中 。 
ID username password question answer truename sex address tel aa e-mail authority 
24 admin 。 123456 。 你 最 好 的 朋友 是 ? 我 朋友 叫 小 季 admin 。 男 | 北京 海 定 区 13012345678 11223345 admin@163 com 1 
29 地 芳 123456 “你 最 好 的 朋友 是 9 王 飞 王 N “ 男 北京 全 水 区 13112345678 23232323 地 @163com 0 
31 张 恒 123456 。 你 最 好 的 朋友 是 ? 高尚 高 男 上海 崔 南 区 13512345678 56421354 | 张 恒 163@163 com 0 
32 和 参 123456 。 你 最 好 的 朋友 是 ? “吴宇 请 。 “| 女 “郑州 中 原 区 | 13712345678| 54687944 刘 莉 0 
33| 小 张 123456 。 | 你 最 好 的 朋友 是 ? | 小 独 王 垃 男 河南 郑州 13812345678 | 32751489 625948078@qqcom 0 


图 24-11 member 表 中 的 输入 记录 


24.2.2 ”创建 数据 库 连 接 


数据 库 编辑 完成 后 ， 必 须 在 Dreamweaver CC 中 建立 数据 源 连接 对 象 。 这 样 做 的 目的 是 方 

便 在 动态 网 页 中 使 用 前 面 建立 的 信息 系统 数据 库 文件 和 动态 地 管理 信息 数据 。 
EC 根据 前 面 讲 过 的 站 点 设置 方法 ， 设 置 好 “站 点 ”“ 文 档 类 型 ”和 “测试 服务 
器 ”。 打 开创 建 的 index.php 页 面 ， 选 择 【 窗 口 】 一 【数据 库 】 命 令 ， 进 入 【数据 
库 】 面 板 。 单 击 【数据 库 】 面 板 中 的 由 按钮 ， 弹 出 如 图 24-12 所 示 的 菜单 ， 选 择 


| 衬 浊 了 半幅 如 当 国 






































[MySQL 连接 】 命 令 。 并 
ED 进入 【MySQL 连接 】 对 话 框 后 ， 填 入 自 定义 的 连接 名 称 user， 填 入 mysql 服务 明 
器 的 用 户 名 和 密码 ， 单 击 【选取 】 按 钮 来 选取 连接 的 数据 库 ， 如 图 24-13 所 示 。 用 
MySQL 连接 X 从 \ 
. yy 这 esr | 一 有 < 
本 一 | 
1 为 该 文件 创建 站点。 9 于 助 
3 Me Wh- 
4. 单 击 上 面 的 + 按 扭 创建 连接 。 
图 24-12 连接 数据 库 图 24-13 【MySQL 连接 】 对 话 框 


EB 打开 【选取 数据 库 】 对 话 框 ， 选 择 member 数据 库 ， 单 击 【确定 】 按 钮 ， 如 
图 24-14 所 示 。 

ES 返回 到 【MySQL 连接 】 对 话 框 后 ， 单 击 【确定 】 按 钮 。 回 到 Dreamweaver CC 
后 ， 可 以 打开 【数据 库 】 面 板 ，member 数据 库 的 数据 表 在 连接 设置 后 已 经 读 入 
Dreamweaver CC 了 ， 如 图 24-15 所 示 。 























图 24-14 【选取 数据 库 】 对 话 框 图 24-15 【数据 库 】 面 板 

ED 同时 ， 在 网 站 根 目 录 下 将 会 自动 创建 名 为 Connections 的 文件 夹 ， 该 文件 夹 内 
有 一 个 名 为 user.php 的 文件 ， 打 开 该 文件 ， 切 换 到 代码 视图 ， 添 加 以 下 代码 ( 见 
图 24-16): 


mysql_query("set character set 'gb2312'") ;// 读 数据 库 编码 
mysql_query ("set names 'gb2312'");// 写 数据 库 编码 
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国 cwwampwwwwconnectionswserphpr 可 六 涡 





Shostname_usi 

6 $database_us member™; 

7 $username_us: oot"; 

8 S$password_user = ""; 

9 $user = mysql_pconnect($hostname_user 
S$password_user) or trigger_error(mysq 

10 mysql_query("set character set 'gb231: 

Pet names 'gb2312'");// 瑟 

> 


"localhost"; 





Eyre 





三 双 
写 必 








24-16 ”添加 代码 


ECGD 在 Dreamweaver CC 界面 中 选择 【文件 】 一 【保存 】 命 令 ， 保 存 该 文档 ， 完 成 数 
据 库 的 连接 。 





24.3 ”用 户 登 录 模 块 的 设计 


本 节 主 要 介绍 用 户 登 录 模块 的 制作 ， 在 该 模块 中 ， 包 括 登 录 页 面 、 登 录 成 功 页 面 与 登录 
失败 页 面 3 个 页 面 的 制作 。 


24.3.1 登录 页 面 


在 用 户 访问 用 户 管理 系统 时 ， 首 先 要 进行 身份 验证 ， 这 个 功能 要 靠 登 录 页 面 来 实现 。 所 
以 登录 页 面 中 必须 有 要 求 用 户 输入 用 户 名 和 密码 的 文本 框 ， 以 及 输入 完成 后 进行 登录 的 【 登 
录 】 按 钮 和 输入 错误 后 重新 设置 用 户 名 和 密码 的 【 重 置 】 按 钮 。 
制作 登录 页 面 的 具体 操作 步骤 如 下 。 
EEC index.php 页 面 是 用 户 登 录 系统 的 首页 ， 打 开 前 面 创建 的 index.php 页 面 ， 输 入 网 
页 标题 【网 上 菜市 场 】， 如 图 24-17 所 示 。 然 后 选择 【文件 】 一 【保存 】 命 令 将 网 
页 标题 保存 。 


indexphp x 


_indecphp 7 BO。。o。。。 
| 代码 | 拆 分 [设计 | 实时 视图 傅 。 标题 网 上 菜市 声 让 





24-17 创建 index.php 页 面 


EEC 选择 【修改 】 一 【页 面 属性 】 命 令 ， 在 【背景 颜色 】 文 本 框 中 输入 颜色 值 为 
#cccccc， 在 【上 边 距 】 文 本 框 中 输入 0 像素 ， 这 样 设 置 的 目的 是 让 页 面 的 第 一 个 表 
格 能 置顶 到 上 边 ， 设 置 如 图 24-18 所 示 。 

EEJSp 设置 完成 后 单 击 【确定 】 按 钮 ， 进 入 【文档 】 窗 口 ， 选 择 【 插 入 】 一 【表格 】 
命令 ， 打 开 【 表 格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 需要 插入 表格 的 行 数 ， 这 里 
输入 3， 在 【 列 】 文 本 框 中 输入 需要 插入 表格 的 列 数 ， 这 里 输入 3， 在 【表格 宽度 】 
文本 框 中 输入 775 像素 ， 【边框 粗 细 】、【 单 元 格 边 距 】 和 【单元 格 间距 】 都 设 为 
0， 如 图 24-19 所 示 。 
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EEC 单 击 【 确 定 】 按 钮 ， 这 样 就 在 【文档 】 窗 口中 插入 了 一 个 3 行 3 列 的 表格 。 将 
鼠标 放置 在 第 1 行 表 格 中 ， 在 【属性 】 面 板 中 单 击 【 合 并 所 选单 元 格 ， 使 用 跨度 】 
按钮 四， 将 第 1 行 表格 合并 ， 再 选择 【插入 】 一 【图 像 】 命 令 ， 打 开 【 选 择 图 像 源 
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图 24-18 【页 面 属性 】 对 话 框 


文件 】 对 话 框 ， 在 站 点 images 文件 夹 中 选择 图 片 01.gif， 如 图 24-20 所 示 。 
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24-19 【表格 】 对 话 框 图 24-20 【选择 图 像 源 文件 】 对 话 框 


EB 单 击 【 确 定 】 按 钮 ， 即 可 在 表格 中 插入 此 图 片 ， 将 鼠标 放置 在 第 3 行 表格 中 ， 
在 【属性 】 面 板 中 单 击 【合并 所 选单 元 格 ， 使 用 跨度 】 按 钮 回 ， 将 第 3 行 所 有 单元 
格 合并 ， 再 选择 【插入 】 一 【图 像 】 命 令 ， 打 开 【 选 择 图 像 源 文件 】 对 话 框 ， 在 站 

点 images 文件 夹 中 选择 图 片 05.gif， 插 入 一 个 图 片 ， 效 果 如 图 24-21 所 示 。 
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24-21 ”插入 图 片 效果 
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EECDD 插入 图 片 后 ， 选 择 插入 的 整个 表格 ， 在 【属性 】 面 板 的 【对 齐 】 下 拉 列 表 框 中 
选择 【居中 对 齐 】 选 项 ， 让 插入 的 表格 居中 对 齐 ， 如 图 24-22 所 示 。 


























大 任 
于 要 行 m5 宽 和 D 300 [多 素 ~] 塘 充 Q) 0 | 对 齐 内 [居中 对 并 v] 类 中) 无 - 
一 -到 3 局 下 6) 0 过 三 gj 

写 守 名 国 忆 全 ] SD 

下 








图 24-22 设置 为 居中 对 齐 


ED 把 光标 移 至 创建 表格 第 2 行 第 1 列 中 ， 在 【属性 】 面 板 中 设置 高 度 为 456 像 
素 ， 宽 度 为 195 像素 ， 设 置 高 度 和 宽度 是 根据 背景 图 像 而 定 ， 在 【垂直 】 下 拉 列 表 
框 中 选择 【 顶端】 选项 ， 再 将 光标 移 至 这 一 列 中 ， 单 击 镜 纵 按钮 ， 在 <td> 中 输入 
background=wimages/02.gif'， 设 置 成 这 一 列 中 的 背景 图 像 一 一 该 站 点 中 images 文件 
夹 中 的 02.gif 文件 ， 得 到 效果 如 图 24-23 所 示 。 











ES 

[Om] 格式 中 [无 | 大 无 -B71 二 址 标题 0 | 
副 css Ia 无 ~ 钳 接 0 -DD Bf 

到 单元 格 水平) 时， 宽 和 ) 195 不 换行 0) 门诊 景 颜色 () 三 

一 口 北 站 直 0 高 0D ”456 标题 中) 门 
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24-23 ”插入 图 片 的 效果 


EEC 在 表格 的 第 2 行 第 2 列 和 第 3 列 中 ， 分 别 插入 同 站 点 images 文件 夹 中 的 图 片 
03.gif 和 04.gif， 完 成 网 页 的 结构 搭建 ， 如 图 24-24 所 示 。 

EEC) 单 击 第 2 行 第 1 列 单元 格 ， 然 后 再 单 击 【文档 】 窗 口上 的 拆 分 按钮 ， 进 入 文档 
窗口 的 【 拆 分 】 窗 口 模式 ， 在 <td> 和 </td> 之 间 输 入 valign="top"( 表 格 文字 和 图 片 的 
相对 摆 放 位 置 ， 可 选 值 为 ttp、middle、bottom， 其 中 valign="top" 表 示 单 元 格 内 容 位 
于 本 单元 格 的 上 部 ; valign="middle" 表 示 单 元 格 内 容 位 于 本 单元 格 的 中 部 ; 
valign="bottom" 表 示 单 元 格 内 容 位 于 本 单元 格 的 底部 ) 的 命令 ， 表 示 让 鼠标 指针 能 够 


令 522 


自动 地 贴 至 该 单元 格 的 最 顶部。 设置 如 图 24-25 所 示 。 
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24-25 ”设置 单元 格 的 对 齐 方式 为 上 部 


基于 Dy 单 击 【 文 档 】 窗 口上 的 【设计 】 按 钮 ， 返 回 【设计 】 视 图 之 中 ， 将 光标 放置 在 
刚 创 建 的 表格 中 ， 然 后 选择 【插入 】 一 【表单 】 一 【表单 】 命 令 ， 如 图 24-26 所 
示 ， 插 入 一 个 表单 。 

本 Dy 将 鼠标 指针 放置 在 该 表单 中 ， 选 择 【 插 入 】 一 【表格 】 命 令 ， 打开 【表格 】 对 
话 框 ， 在 【 行 数 】 文 本 框 中 输入 5， 在 【 列 】 文 本 框 中 输入 2， 在 【表格 宽度 】 文 本 
框 中 输入 179 像素 。 在 该 表单 中 插入 5 行 2 列 的 表格 ， 如 图 24-27 所 示 。 

本 于 BY 单 击 并 拖 动 鼠标 分 别 选 择 第 1 行 和 第 4 行 表格 ， 并 分 别 在 【属性 】 面 板 中 单 击 
【合并 所 选单 元 格 ， 使 用 跨度 】 按 钮 一 ， 将 这 几 行 表格 进行 合并 。 然 后 在 表格 的 第 
1 行 中 输入 文字 【用 户 登 录 】， 并 在 【属性 】 面 板 中 设置 该 文字 的 大 小 、 颜 色 以 及 
单元 格 的 背景 颜色 等 ， 如 图 24-28 所 示 。 
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图 24-26 选择 【表单 】 命 令 图 24-27 插入 表格 
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图 24-28 【属性 】 面板 


EECEE 在 表格 第 2 行 第 1 列 中 输入 文字 说 明 【 用 户 名 】， 在 第 2 行 第 2 列 中 选择 【 插 
入 】 一 【表单 】 一 【文本 域 】 命 令 ， 插 入 一 个 单行 文本 域 表单 对 象 ， 并 定义 文本 域 
名 为 username， 文 本 域 属性 设置 及 此 时 的 效果 如 图 24-29 所 示 。 





加 芝 s 字符 宽度 0 [17 类 型 回 单行 6) ” 门 多 行 有 D 。” 品 密 码 P) 类 (0) 无 
usernane | 最 多 字符 数 ] 




















图 24-29 输入 【用 户 名 】 和 插入 文本 域 


SS 设置 文本 域 的 属性 说 明 如 下 。 

昌 【文本 域 】 文 本 框 : 在 【文本 域 】 文 本 框 中 ， 为 文本 域 指定 一 个 名 称 。 每 
个 文本 域 都 必须 有 一 个 唯一 名 称 。 表 单 对 象 名 称 不 能 包含 空格 或 特殊 字符 。 
可 以 使 有 字母、 数字、 字符 和 下 划 线 ( ) 的 任意 组 合 。 请 注意 ， 为 文本 域 指 
定 的 标签 是 将 存储 该 域 的 值 (输入 的 数据 ) 的 变量 名 ， 这 是 发 送 给 服务 器 进行 


处 理 的 值 。 

@ 【字符 宽度 】: 【字符 宽度 】 设 置 域 中 最 多 可 显示 的 字符 数 。 

@ 【最 多 字符 数 】: 【最 多 字符 数 】 指 定 在 域 中 最 多 可 输入 的 字符 数 ， 如 果 
保留 为 空白 ， 则 输入 不 受 限制 。 

@ 【类 型 】: 【类 型 】 用 于 指定 文本 域 是 【单行 】、【 多 行 】 还 是 【密码 】 
域 。 单 行文 本 域 只 能 显示 一 行文 字 ; 多 行 则 可 以 输入 多 行文 字 ， 达 到 字符 宽 
度 后 换行 ; 密码 文本 域 则 用 于 输入 密码 。 

@ 【初始 值 】: 【初始 值 〗】 指 定 在 首次 载 入 表单 时 ， 域 中 显示 的 值 。 例 如 ， 
通过 包含 说 明 或 示例 值 ， 可 以 指示 用 户 在 域 中 输入 信息 。 

@ 【类 】: 【类 】 可 以 将 CSS 规则 应 用 于 对 象 。 


EC 在 第 3 行 第 1 列表 格 中 输入 文字 【登录 密码 】， 在 第 3 行 表格 的 第 2 列 中 选择 
【插入 】 一 【表单 】 一 【文本 域 】 命 令 ， 插 入 密码 文本 域 表 单 对 象 ， 定 义 【文本 
域 】 名 为 password。【 文 本 域 】 属 性 设置 及 此 时 的 效果 如 图 24-30 所 示 。 
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图 24-30 ”密码 文本 域 的 设置 


ECEDD 选择 第 4 行 单元 格 ， 选 择 【 插 入 】 一 【表单 】 一 【按钮 】 命 令 两 次 ， 插 入 两 个 
按钮 ， 并 分 别 在 【属性 】 面 板 中 进行 属性 变更 ， 一 个 为 登录 时 用 的 【提交 表单 】 选 
项 ， 一 个 为 【 重 设 表单 】 选 项 ， 属 性 的 设置 如 图 24-31 所 示 。 


信 ) 吕 杂 动作 器 提交 志 单 6) 站 无 o 类 C) 无 


动作 门 提交 表单 S) 中 无 类 C) 无 加 
button2 | 器 重 设 表 单 @) 





图 24-31 设置 按钮 
EB 合并 第 5 行 单元 格 ， 在 第 5 行 输入 【注册 新 用 户 】 文 本 ， 并 选中 这 几 个 字 ， 然 


| 室 江 当中 洲 _ 二 过 展 


警 浇 聘 束 也 可 号 悦 由 站 
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后 在 窗口 栏 中 选择 【插入 】 一 【超级 链接 】 命 令 ， 打 开 超 级 链接 对 话 框 ， 在 其 中 将 
【 目标】 设置 为 blank， 这 样 可 以 在 新 窗口 中 打开 页 面 ， 然 后 设置 链接 对 象 为 用 户 
注册 页 面 registerphp， 以 方便 用 户 注册 ， 输 入 的 效果 如 图 24-32 所 示 。 



























































24-32 ”建立 链接 


EC 如 果 已 经 注册 的 用 户 忘记 了 密码 ， 还 希望 以 其 他 方式 能 够 重新 获得 密码 ， 可 以 
在 表格 的 第 4 列 中 输入 【 找 回 密码 】 文 本 ， 并 设置 一 个 转 到 密码 查询 页 面 
lostpassword.php 的 链接 对 象 ， 以 方便 用 户 取 回 密码 ， 如 图 24-33 所 示 。 


Hyperlink x 








文本 : 左 回 盏 现 
馆 接 :|1ostpassvord. php v] 轩 
目标 : -blank ~ 
标 是 : | 找 回 军 码 
访问 键 : 
Tab 键 索引 - 














BE 









































图 24-33 ”密码 查询 设置 


EEC 表单 编辑 完成 后 ， 下 面 来 编辑 该 网 页 的 动态 内 容 ， 使 用 户 可 以 通过 该 网 页 中 的 
表单 实现 登录 功能 。 打 开 【 服 务 器 行为 】 面 板 ， 单 击 该 面板 上 的 上 按钮， 选择 菜单 
中 的 【用 户 身 份 验证 】 一 【登录 用 户 】 命 令 ， 如 图 24-34 所 示 ， 向 该 网 页 添加 【 登 
录用 户 】 的 服务 器 行为 。 

EEC 此 时 ， 打 开 【 登 录用 户 】 对 话 框 ， 在 该 对 话 框 中 进行 如 下 设置 。 

e ”从 【从 表单 获取 输入 】 下 拉 列 表 框 中 选择 该 服务 器 行为 使 用 网 页 中 的 forml 对 象 ， 
设 定 该 用 户 登录 服务 器 行为 的 用 户 数据 来 源 为 表单 对 象 中 访问 者 填写 的 内 容 。 

@ ”从 【用 户 名 字段 】 下 拉 列 表 框 中 选择 文本 域 usemame 对 象 ， 设 定 该 用 户 登 录 服务 器 
行为 的 用 户 名 数据 来 源 为 表单 的 username 文本 域 中 访问 者 输入 的 内 容 。 

e ”从 【密码 字段 】 下 拉 列 表 框 中 选择 文本 域 password 对 象 ， 设 定 该 用 户 登录 服务 器 行 
为 的 用 户 名 数据 来 源 为 表单 的 password 文本 域 中 访问 者 输入 的 内 容 。 

®@ ”从 【使 用 连接 验证 】 下 拉 列 表 框 中 ， 选 择 用 户 登 录 服务 器 行为 使 用 的 数据 源 连接 对 
象 为 user。 

e 从 【表格 】 下 拉 列 表 框 中 ， 选 择 该 用 户 登录 服务 器 行为 使 用 到 的 数据 库 表 对 象 为 


member。 


从 【用 户 名 列 】 下 拉 列 表 框 中 ， 选 择 表 member 存储 用 户 名 的 字段 为 usermame。 

从 【密码 列 】 下 拉 列 表 框 中 ， 选 择 表 member 存储 用 户 密码 的 字段 为 password。 

在 【如 果 登 录 成 功 ， 转 到 】 文 本 框 中 输入 登录 成 功 后 ， 转 向 welcome php 页 面 。 

在 【如 果 登 录 失 败 ， 转 到 】 文 本 框 中 输入 登录 失败 后 ， 转 向 loginfail.php 页 面 。 

选中 【基于 以 下 项 限制 访问 】 右 侧 的 【用 户 名 、 密 码 和 访问 级 别 】 单 选 按钮 ， 设 定 
后 面 将 根据 用 户 的 用 户 名 、 密 码 及 权限 级 别 共同 决定 其 访问 网 页 的 权限 。 

从 【获取 级 别 自 】 下 拉 列 表 框 中 ， 选 择 authority 字段 ， 表 示 根 据 authority 字段 的 数 
字 来 确定 用 户 的 权限 级 别 。 


设置 完成 后 的 对 话 框 显 示 如 图 24-35 所 示 。 























Go To Detail page 








Go ToRelated Page 


口 转 到 前 一 个 URLG90 果 亡 存 在 ) 
如 果 登 录 失 败 ， 转 到 : LoginEsiL Php 
天 于 以 下 条 制 访问 〇 用户 名 和 密码 

图 用 户 名 、 密 码 和 访问 名 别 

RM: authority 9 





























图 24-34 ”添加 【登录 用 户 】 的 服务 器 行为 图 24-35 【登录 用 户 】 对 话 框 


EEPW 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 


EEZ 表单 对 象 对 应 的 【属性 】 面 板 的 动作 属性 值 如 


框 ， 返 回 到 【文档 】 窗 口 。 在 【服务 器 行为 】 面 
板 中 就 增加 了 一 个 【登录 用 户 】 行 为 ， 如 图 24-36 
所 示 。 


图 24-37 所 示 ， 为 <?php echo $loginFormAction: ?>。 
它 的 作用 就 是 实现 用 户 登 录 功 能 ， 这 是 
Dreamweaver CC 自动 生成 的 一 个 动作 代码 。 








图 24-36 【服务 器 行为 】 面 板 


EZ> 选择 【文件 】 一 【保存 】 命 令 ， 将 该 文档 保存 





到 本 地 站 点 中 ， 完 成 网 站 的 首页 制作 ， 首 页 设计 的 最 终 效果 如 图 24-38 所 示 。 







动作 <?php echo $losinFornAction; ?〉 “| 加 目 标 0) 
方法 Posr - es 











24-37 ”表单 对 应 的 【属性 】 面 板 
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警 油 聘 束 也 可 号 司 由 局 
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图 24-38 ”首页 设计 的 最 终 效果 


24.3.2 ”登录 成 功 和 登录 失败 页 面 的 制作 


当 用 户 输 入 的 登录 信息 不 正确 时 ， 就 会 转 到 loginfail.php 页 面 ， 显 示 登 录 失 败 的 信息 。 如 
果 用 户 输入 的 登录 信息 正确 ， 就 会 转 到 welcome.php 页 面 。 

制作 登录 失败 页 面 的 具体 操作 步骤 如 下 。 

EEIDp 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 中 的 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目录 下 新 建 一 个 名 为 
loginfail.php 的 网 页 并 保存 ， 如 图 24-39 所 示 。 

EEIDp 登录 失败 页 面 设计 ， 如 图 24-40 所 示 ， 在 【文档 】 窗 口中 选中 【这 里 】 链 接 文 
本 ， 加 入 链接 index.php， 将 其 设置 为 指向 index.php 页 面 的 链接 。 

EB 选择 【文件 】 一 【保存 】 命 令 ， 完 成 loginfail.php 页 面 的 创建 。 

| 加 5 为 x 


门 
be 






登录 失败 
登录 失败 ,请 检查 你 填写 的 用 户 各 的 密码 是 否 正确 4 





文才 (Ni [oginfailphp| 
保 丰美 型 [AI Documents (htm;* htmksshtmy shtml*zhtmktsstmz asirjsrjscnyraPPceche ~ 











[Unicode Wm 


~ [sa [9 E23 请 单 击 这 里 重新 登录 4 











24-39 【另存 为 】 对 话 框 24-40 ”登录 失败 页 面 loginfail.php 


制作 登录 成 功 页 面 的 具体 操作 步骤 如 下 。 

EEJDp 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 中 的 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
welcome.php 的 网 页 并 保存 。 

EEJ29 用 类 似 的 方法 制作 登录 成 功 页 面 的 静态 部 分 ， 如 图 24-41 所 示 。 

EEC 选择 【窗口 】 一 【 绑 定 】 命 令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 四 按钮 ， 
在 弹出 的 菜单 中 选择 【阶段 变量 】 命 令 ， 为 网 页 中 定义 一 个 阶段 变量 ， 如 图 24-42 
所 示 。 


1 本 焊 洒 问 孙 装 ， 岂 妇 趴 音 


涂 洲 山 珊 卫 必 二 到 名 十 





图 24-41 ”欢迎 界面 的 效果 图 24-42 添加 阶段 变量 





Sm 【 绑 定 】 面 板 中 各 选项 的 说 明 如 下 。 
闪 @ ”记录 集 (查询 ): 用 来 绑 定数 据 库 中 的 记录 集 ， 在 绑 定 记录 集中 选择 要 绑 定 的 


数据 源 、 数 据 库 以 及 一 些 变量 ， 用 于 记录 的 显示 和 查询 。 

@ 命令 (预存 过 程 ): 在 命令 对 话 框 中 有 更 新 、 删 除 等 命令 ， 选 择 这 个 命令 主要 
是 为 了 让 数据 库 里 的 数据 保持 最 新 状态 。 

@ ”请 求 变量 : 用 于 定义 动态 内 容 源 ， 从 【类 型 】 弹 出 菜单 中 选择 一 个 请 求 集 
合 。 例 如 要 访问 Request.ServerVariables 集合 中 的 信息 ， 则 请 选择 【服务 器 变 
量 】。 如果 要 访问 Request.Form 集合 中 的 信息 ， 则 选择 【表单 变量 】 命 令 。 

@ ”阶段 变量 : 阶段 变量 提供 了 一 种 对 象 ， 通 过 这 种 对 象 ， 用 户 信息 得 以 存储 ， 
并 使 该 信息 在 用 户 访问 的 持续 时 间 中 对 应 用 程序 的 所 有 页 都 可 用 。 阶 段 变量 
还 可 以 提供 一 种 超时 形式 的 安全 对 象 ， 这 种 对 象 在 用 户 账 户 长 时 间 不 活动 的 
情况 下 ， 终 止 该 用 户 的 会 话 。 如 果 用 户 忘记 从 Web 站 点 注销 ， 这 种 对 象 还 
会 释放 服务 器 内 存 和 处 理 资源 。 


EEC 打开 【阶段 变量 】 对 话 框 。 在 【名 称 】 文 本 框 中 输入 阶段 变量 的 名 称 
MM username， 如 图 24-43 所 示 。 

ECEIDp 设置 完成 后 ， 单 击 【 确 定 】 按 钮 ， 在 【文档 】 窗 口中 通过 拖 动 鼠标 选择 
XXXXXX 文本 ， 然 后 在 【 绑 定 】 面 板 中 选择 MM _usemame 变量 ， 再 单 击 【 绑 定 】 
面板 底部 的 【插入 】 按 钮 ， 将 其 插入 到 该 【文档 】 窗 口中 设 定 的 位 置 。 插 入 完毕 ， 
可 以 看 到 XXXXXX 文本 被 {Session.MM_usemame} 占 位 符 代 替 ， 如 图 24-44 所 示 。 
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这 样 ， 就 完成 了 这 个 显示 登录 用 户 名 【阶段 变量 】 的 添加 工作 。 





阶段 变量 x 





名 称 :了 OLusernane| 

















24-43 【阶段 变量 】 对 话 框 24-44 ”插入 后 的 效果 


Se 设计 阶段 变量 的 目的 ， 是 在 用 户 登 录 成 功 后 ， 登 录 界 面 中 直接 显示 用 户 的 名 字 ， 


SS 使 网 页 更 有 亲切 感 。 


葬 于 BY 在 【文档 】 窗 口中 拖 动 鼠标 选中 【注销 你 的 用 户 】 链 接 文本 。 选 择 【 窗 口 】 一 
【服务 器 行为 】 一 【用 户 身份 验证 】 一 【注销 用 户 】 命 令 ， 为 所 选中 的 文本 添加 一 
个 【注销 用 户 】 的 服务 器 行为 ， 如 图 24-45 所 示 。 

EEDDp 打开 【注销 用 户 】 对 话 框 ， 在 该 对 话 框 中 进行 如 下 设置 。 

e@ 【在 以 下 情况 下 注销 】 用 于 设置 注销 。 本 例 选中 【 单 击 链接 】 单 选 按钮 ， 并 在 右边 
的 下 拉 列 表 框 中 选择 【所 选 范围 : “注销 你 的 用 户 ”]】 选 项 ， 这 样 当 用 户 在 页 面 中 
单 击 【 注 销 你 的 用 户 】 时 就 选择 注销 操作 。 

e@ 【在 完成 后 ， 转 到 】 文 本 框 用 于 设置 注销 后 显示 的 页 面 ， 本 例 在 该 文本 框 中 输入 
logootphp， 表 示 注 销 后 转 到 logoot.php 页 面 ， 完 成 后 的 设置 如 图 24-46 所 示 。 





Go To Related page 














注 岗 用 户 x 
释 和 记录 
ee 在 以 下 情史 下 注销 图 单 击 榜 按 - 所 达 范 转注 销 你 的 用 户 ” ~ 一 
本 2 吕 页 而 入 二 
a 有 [DR 
图 24-45 选择 【注销 用 户 】 命 令 图 24-46 【注销 用 户 】 对 话 框 


EEIRB 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 【文档 】 窗 口 。 在 
【服务 器 行为 】 面 板 中 增加 了 一 个 【注销 用 户 】 行 为 ， 如 图 24-47 所 示 。 同 时 可 以 
看 到 【注销 用 户 】 链 接 文 本 对 应 的 【属性 】 面 板 中 的 【链接 】 属 性 值 为 <?php echo 
SlogoutAction ?>， 它 是 Dreamweaver CC 自动 生成 的 动作 对 象 。 

EEC?1logootphp 的 页 面 设计 比较 简单 ， 不 作 详 细 说 明 ， 在 页 面 中 的 文字 “这 里 ”处 指 
定 一 个 链接 到 首页 index.php 就 可 以 了 ， 如 图 24-48 所 示 。 


ss 口 x 
引 | 因 -| 加 hepyoaiho-P ~ 0 | @ mA 
文件 (站 帝 短 日 。 坦 看 M。 收 襄 夫 A 工具 Mm 帮助 H) 


















谢谢 你 的 访问 ! 您 己 安全 退出 ! 








| 室 江 天 回路 洲 _ 协 刀 江 轿 





i - Ll: Pt 重新 半 录 请 单刷 这 里 。 
动态 文本 (Session MN_username) 
注销 用 户 
< > 
24-47 ”添加 注销 用 户 功 能 24-48 ”注销 用 户 页 面 设计 效果 图 


EEC 选择 【文件 】 一 【保存 】 命 令 ， 将 该 文档 保存 到 本 地 站 点 中 。 编 辑 工作 完成 
后 ， 就 可 以 测试 该 用 户 登录 系统 的 选择 情况 了 。 文 档 中 的 【修改 你 的 注册 资料 】 链 
接 到 userupdate.php 页 面 ， 此 页 面 将 在 后 面 的 修改 中 进行 介绍 。 


24.3.3 用户 登录 系统 功能 的 测试 


制作 好 一 个 系统 后 ， 需 要 测试 无 误 ， 才 能 上 传 到 服务 器 以 供 使 用 。 下 面 就 对 登录 系统 进 
行 测试 。 测 试 的 具体 操作 步骤 如 下 。 
ED 打开 IE 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 页 
面 ， 如 图 24-49 所 示 。 在 【用 户 名 】 和 【登录 密码 】 文 本 框 中 输入 用 户 名 及 密码 ， 
输入 完毕 ， 单 击 【 登 录 】 按 钮 。 
EEJP9 如 果 在 第 2 步 中 填写 的 登录 信息 是 错误 的 ， 或 者 根本 就 没有 输入 ， 则 浏览 器 就 
会 转 到 登录 失败 页 面 loginfail.php， 显 示 登 录 错 误 信 息 ， 如 图 24-50 所 示 。 
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2 
图 24-49 打开 的 网 站 首页 图 24-50 ”登录 失败 页 面 


TB 如 果 输 入 的 用 户 名 和 密码 都 正确 ， 则 显示 登录 成 功 页 面 。 这 里 输入 的 是 前 面 数 
据 库 设置 的 用 户 admin， 登 录 成 功 后 的 页 面 如 图 24-51 所 示 ， 其 中 显示 了 用 户 名 
admin。 

YY 如 果 想 注销 用 户 ， 只 需要 单 击 【 注 销 你 的 用 户 】 超 链接 即 可 ， 注 销 用 户 后 ， 浏 
览 器 就 会 转 到 页 面 logoot.php， 然 后 单 击 【 这 里 】 链 接 回 到 首页 ， 如 图 24-52 所 示 。 
至 此 ， 登 录 功 能 就 测试 完成 了 。 
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谢谢 你 的 访问 ! 您 已 安全 退出 ! 
重新 登录 请 单 击 这 里 。 
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图 24-51 登录 成 功 页 面 图 24-52 ”注销 用 户 页 面 





24.4 用 户 注册 模块 的 设计 


用 户 登 录 系 统 是 供 数 据 库 中 己 有 的 老 用 户 登 录用 的 ， 一 个 用 户 管理 系统 还 应 该 提供 新 用 
户 注册 用 的 页 面 。 对 新 用 户 来 说 ， 通 过 单 击 index.php 页 面 上 的 【注册 新 用 户 】 超 链接 ， 进 入 
到 名 为 register.php 的 页 面 ， 在 该 页 面 中 可 以 实现 新 用 户 注 册 功 能 。 


24.4.1 用 户 注册 页 面 


register.php 页 面 主要 实现 用 户 注册 的 功能 。 用 户 注册 的 操作 就 是 向 member.mdb 数据 库 
的 member 表 中 添加 记录 的 操作 。 

有 具体 操作 步骤 如 下 。 

TP 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 中 的 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
register.php 的 网 页 并 保存 。 

EEJPp 在 Dreamweaver CC 中 使 用 制作 静态 网 页 的 工具 完成 如 图 24-53 所 示 的 静态 部 
分 。 这 里 要 说 明 的 是 注册 时 需要 加 入 一 个 【隐藏 区 域 】 并 命名 为 authority， 设 置 默 
认 值 为 0， 即 所 有 的 用 户 注册 时 默认 是 一 般 访问 用 户 




















24-53 ”register.php 页 面 静态 设计 


ETE> 还 需要 设置 一 个 验证 表单 的 动作 ， 用 来 检查 访问 者 在 表单 中 填写 的 内 容 是 否 满 
足 数 据 库 中 表 member 中 字段 的 要 求 。 在 将 用 户 填写 的 注册 资料 提交 到 服务 器 之 
前 ， 就 会 对 用 户 填写 的 资料 进行 验证 。 如 果 有 不 符合 要 求 的 信息 ， 可 以 向 访问 者 显 
示 错 误 的 原因 ， 并 让 访问 者 重新 输入 。 

ED 选择 【窗口 】--【 行 为 】 命 令 ， 打 开 【 行 为 】 面 板 ， 单 击 【 行 为 】 面 板 中 的 节 | 
按钮 ， 从 弹出 的 菜单 中 选择 【检查 表单 】 命 令 ， 打 开 【 检 查 表单 】 对 话 框 ， 如 图 24-54 
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24-54 【检查 表单 】 对 话 框 





在 本 例 中 ， 设 置 username 文本 域 、password 文本 域 、passwordl 文本 域 、answer 
文本 域 、truename 文本 域 、address 文本 域 为 【 值 : 必需 的 、【〖【 可 接受 : 任何 东 
西 〗】， 即 这 几 个 文本 域 必须 填写 ， 内 容 不 限 ， 但 不 能 为 空 ; tel 文本 域 和 qq 文本 域 设 
置 的 验证 条 件 为 【 值 : 必需 的 〗】、【 可 接受 : 数字 〗， 表 示 这 两 个 文本 域 必须 填写 数 
字 ， 不 能 为 空 ; email 文本 域 的 验证 条 件 为 【 值 : 必需 的 〗、【 可 接受 : 电子 邮件 地 
址 〗， 表 示 该 文本 域 必须 填写 电子 邮件 地 址 ， 且 不 能 为 空 。 


EECRD 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 完 成 对 检查 表单 的 设置 。 
EECD 在 【文档 】 窗 口中 单 击 工具 栏 上 的 【代码 】 按 钮 ， 转 到 【代码 】 编 辑 窗口 ， 然 
后 在 验证 表单 动作 的 源 代码 中 加 入 如 下 代码 : 


<script type="text/javascript"> 
function MM validateForm() { //v4.0 
if (document .getElementById){ 
Var i,p,qdnm,test,num,min,max,errors="''"',args=MM validateForm.arguments; 
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; 
val=document .getElementById (args [i]); 
if (val) { nm=val.name; if ((val=val.value)!="") { 
if (test.indexOof ('isEmail')!=-1) { p=val.indexOof ('@'); 
if (p<1 || p==(val.length-1)) errors+='— '+nm+' must contain an e- 
mail address.\n'; 
} else if (test!='R') { num = parseFloat (val); 
if (isNaN(val)) errors+='— '+nm+' must contain a number.\n'; 


if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); 
min=test.substring(8,p); max=test.substring (p+1); 
if (num<min || max<num) errors+='— '+nm+' must contain a number 
between '+min+' and '+maxt+'.\n'; 
opelse i (test charAt(0) = "BR ) errore t= nm Ts 
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required.\n'; } 
} if (errors) alert('The following error(s) occurred:\n'+errors); 
document .MM returnValue = (errors == ''); 

EE 

</script> 


把 代码 修改 成 如 下 : 


<script type="text/JavaScript"> 
// 宣 告 脚本 语言 为 Javascript 
了 三 
function MM findobj(n, d) { //v4.01 

Var pi,x; if(!d) d=document; if((P=n.indexof("?") ) >0&&parent.frames. 
length) { 

d=parent .frames[n.substring (p+1)] .document; n=n.substring(0,p);} 

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d. 
forms[i] [n]; 

for (i=0; Ix&&d.layersg&i<d.layers.length;i++) x=MM findobj (n,d.layers[i]. 
document); 

if(!x && d.getElementById) x=d.getElementById(n); return x; 


j 
// 定 义 创建 对 话 框 的 基本 属性 
function MM validateForm() { //v4.0 
Var i,pqinm,test,num,min,max,errors='',args=MM validateForm.arguments; 
// 检 查 提交 表单 的 内 容 
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; 
val=MM findobj (args [i]); 
if (val) { nm=val.name; if ((val=val.value)!="") { 
if (test.indexof ('isEmail')!=-1) { p=val.indexOf ('@'); 
if (p<1 || p==(val.length-1)) errors+='- '+nm+' 需要 输入 邮箱 地 址 . \n'; 
// 如 果 提 交 的 邮箱 地 址 表单 中 不 是 邮件 格式 则 显示 为 “需要 输入 邮箱 地 址 ” 
} else if (test!='R') { num = parseFloat (val); 
if (isNaN (val)) errors+='- '+nm+' 需要 输入 数字 .\n'; 
// 如 果 提 交 的 电话 表单 中 不 是 数字 则 显示 为 “需要 输入 数字 ” 





if (test.indexof ('inRange') != -1) { p=test.indexOof(':'); 
min=test.substring (8,p); max=test.substring (p+1); 
if (num<min || max<num) errors+='- '+nm+' 需要 输入 数字 '+min+' and 


a 
// 如 果 提 交 的 ge 表单 中 不 是 数字 则 显示 为 “需要 输入 数字 ” 
} } } else if (test.charAt (0) == 'R') errors += '— ‘+nmt+' 需要 输入 .\n'; } 

// 如 果 提交 的 地 址 表单 为 空 则 显示 为 “需要 输入 ” 

} if (MM_findobj ('password') .value!=MM findobj ('password1') .value) errors += 
'- 两 次 密码 输入 不 一 致 \n'; 

if (errors) alert(' 注 册 时 出 现 如 下 错误 :\n'+errors); 

document .MM returnValue = (errors == "''); 
// 如 果 出 错时 将 显示 “注册 时 出 现 如 下 错误 : ” 
下 
二 


</script> 
编辑 代码 完成 后 ， 单 击 工具 栏 上 的 【设计 】 按 钮 ， 返 回 到 【设计 】 视 图 。 此 时 ， 可 以 测 


试 一 下 选择 的 效果 ， 当 两 次 输入 的 密码 不 一 致 ， 然 后 单 击 【提交 】 按 钮 时 ， 则 会 打开 一 个 提 
示 信 息 框 ， 如 图 24-55 所 示 的 提示 信息 框 告诉 访问 者 两 次 密码 输入 不 一 致 。 


G4 


ET 在 该 网 页 中 添加 一 个 【插入 记录 】 的 服务 器 行为 。 


选择 【窗口 】 一 【服务 器 行为 】 命 令 ， 打 开 【 服 务 器 行 。 | ~ 
为 】 面 板 。 单 击 该 面板 上 的 [ 基 按钮 ， 在 弹出 的 菜单 中 先 Da 
择 【 插 入 记录 】 命令 ， 则 会 打开 【插入 记录 】 对 话 框 。 : 

在 该 对 话 框 中 进行 如 下 设置 。 


@ ”从 【连接 】 下 拉 列 表 框 中 选择 user 作为 数据 源 连 接 对 象 。 
@ 从 【插入 表格 】 下 拉 列 表 框 中 选择 member 作为 使 用 的 
数据 库 表 对 象 。 
e@ 在 【插入 后 ， 转 到 】 文 本 框 中 设置 记录 成 功 添加 到 表 ee 
member 后 ， 转 到 regok.php 网 页 。 图 24-55 ”提示 信息 框 
@ 在 【 列 】 列 表 框 中 ， 将 网 页 中 的 表单 对 象 和 数据 库 中 表 
member 中 的 字段 一 一 对 应 起 来 。 
设置 完成 后 该 对 话 框 如 图 24-56 所 示 。 
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图 24-56 【插入 记录 】 对 话 框 


EB 设置 完成 后 ， 单 击 【 确 定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 【文档 】 窗 口 。 此 时 
的 设计 样式 如 图 24-57 所 示 。 
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24-57 ”插入 记录 后 的 效果 
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ESRD) 用 户 名 是 用 户 登 录 的 身份 标志 ， 并 且 是 不 能 够 重复 的 ， 所 以 在 添加 记录 之 前 ， 
一 定 要 先 在 数据 库 中 判断 该 用 户 名 是 否 存在 ， 如 果 存 在 ， 则 不 能 进行 注册 。 在 
Dreamweaver CC 中 提供 了 一 个 检查 新 用 户 名 的 服务 器 行为 ， 单 击 【 服 务 器 行为 】 面 
板 上 的 频 按 钮 ， 在 弹出 的 菜单 中 ， 选 择 【用 户 身份 验证 】~~【 检 查 新 用 户 名 】 命 
令 ， 此 时 ， 会 打开 一 个 【检查 新 用 户 名 】 对 话 框 ， 在 该 对 话 框 中 进行 如 下 设置 。 

e@ ”在 【用 户 名 字段 】 下 拉 列 表 框 中 选择 usemame 字段 。 

e@ ”在 【如 果 已 存在 ， 则 转 到 】 文 本 框 中 输入 regfaiLphp。 表 示 如 果 用 户 名 已 经 存在 ， 则 
转 到 regfail.php 页 面 ， 显 示 注 册 失 败 信息 ， 该 网 页 将 在 后 面 编辑 。 

设置 完成 后 的 对 话 框 如 图 24-58 所 示 。 
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24-58 【检查 新 用 户 名 】 对 话 框 


EC 设置 完成 后 ， 单 击 该 对 话 框 中 的 【确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 【 文 
档 】 窗 口 。 在 【服务 器 行为 】 面 板 中 增加 了 一 个 【检查 新 用 户 名 】 行 为 ， 如 图 24-59 
所 示 。 

EEC 选择 【文件 】 一 【保存 】 命 令 ， 将 该 文档 保存 到 本 地 站 点 中 ， 完 成 本 页 的 制 
作 ， 最 终 的 效果 如 图 24-60 所 示 。 
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24-59 【服务 器 行为 】 面 板 24-60 ”注册 页 面 最 终 效 果 


24.4.2 ”注册 成 功 和 注册 失败 页 面 


为 了 方便 用 户 登 录 ， 应 该 在 regok.php 页 面 中 设置 一 个 转 到 index.php 页 面 的 文字 链接 ， 
以 方便 用 户 进行 登录 。 同 时 ， 为 了 方便 访问 者 重新 进行 注册 ， 则 应 该 在 regfail.php 页 面 设置 
一 个 转 到 register.php 页 面 的 文字 链接 。 


制作 显示 注册 成 功 和 失败 页 面 信息 的 具体 操作 步骤 如 下 。 

TDD 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 中 的 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目录 下 新 建 一 个 名 为 
regok.php 的 网 页 并 保存 。 

EEJP9 regok.php 页 面 如 图 24-61 所 示 。 制 作 比 较 简 单 ， 其 中 文字 【这 里 】 设 置 为 指向 
index.php 页 面 的 链接 。 

BY 如 果 用 户 输入 的 注册 信息 不 正确 或 用 户 名 已 经 存在 ， 则 应 该 向 用 户 显示 注册 失 
败 的 信息 。 这 里 再 新 建 一 个 regfail.php 页 面 ， 该 页 面 的 设计 如 图 24-62 所 示 。 其 中 
【这 里 】 文 本 设置 为 指向 register.php 页 面 的 链接 。 
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图 24-61 注册 成 功 regok.php 页 面 图 24-62 注册 失败 regfail.php 页 面 


24.4.3 ”用户 注册 功能 的 测试 


设计 完成 后 ， 就 可 以 测试 该 用 户 注册 功能 的 选择 情况 了 。 有 具体 操作 步骤 如 下 。 

ES 打开 IE 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/register.php， 打 开 register.php 
文件 ， 如 图 24-63 所 示 。 

本 TY 可 以 在 该 注册 页 面 中 输入 一 些 不 正确 的 信息 ， 如 漏 填 username、password 等 必 
填 字段 ， 或 填写 错误 的 E-mail 地 址 ， 或 在 确认 密码 时 两 次 输入 的 密码 不 一 致 ， 以 测 
试 网 页 中 验证 表单 动作 的 选择 情况 。 如 果 填 写 的 信息 不 正确 ， 则 浏览 器 应 该 打开 提 
示 信 息 框 ， 向 访问 者 显示 错误 原因 。 如 图 24-64 所 示 是 一 个 提示 信息 框 。 


涡 洲 山 开 并 汪 其 习 汪 章 一 一 | 全 新 泗 央 只 其 坤 yz 洲 时 
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让 食堂 采购 更 加 简单 
亲自 网 页 的 消息 x 
1 注册 时 出 现 如 下 错误 : 
I -username 要 要 给 入 . 
-~ email 需要 擅 入 . 
用户 兴 琴 汪 注 六 多 1 - QQ 需要 输入 数字 . 
上 address 天 要 护 入 . 
3 EE rae answer 需要 输入 . 
RP: 不 一 至 
a 
有 机 俱 材 。 - 
全 和 
me 
E 
图 24-63 ”打开 的 测试 页 面 图 24-64 ”提示 信息 框 





ECDIS 在 该 注册 页 面 中 注册 一 个 已 经 存在 的 用 户 名 ， 如 果 输 入 admin， 用 来 测试 新 用 户 
服务 器 行为 的 选择 情况 。 然 后 单 击 【 确 定 】 按 钮 ， 此 时 由 于 用 户 名 已 经 存在 ， 浏 览 
器 会 自动 转 到 regfail.php 页 面 ， 如 图 24-65 所 示 ， 告 诉 访问 者 该 用 户 名 已 经 存在 。 此 
时 ， 访 问 者 可 以 单 击 【这 里 】 链 接 文本 ， 返 回 registerphp 页 面 ， 以 便 重新 进行 注册 。 
在 该 注册 页 面 中 填写 如 图 24-66 所 示 的 注册 信息 。 


让 及 党 末 灼 更 加 向 单 。 = Rs 











| 
ENT EE: 
EE | 


图 24-65 ”注册 失败 页 面 


区 于 BY 单 击 【 确 定 】 按 钮 。 由 于 这 
些 注册 资料 完全 正确 ， 而 且 这 个 
用 户 名 没有 重复 ， 所 以 浏览 器 会 
转 到 regok.php 页 面 ， 向 访问 者 显 
示 注 册 成 功 的 信息 ， 如 图 24-67 
所 示 。 此 时 ， 访 问 者 可 以 单 击 ae 
【这 里 】〗 链 接 文本 ， 转 到 ee 
index .php 页 面 ， 以 便 进 行 登录 。 

至 此 ， 基 本 完成 了 用 户 管理 系统 中 注 








册 功 能 的 开发 和 测试 。 在 制作 的 过 程 中 ， 图 24-67 ”注册 成 功 页 面 
可 以 根据 制作 网 站 的 需要 适当 加 入 其 他 更 
多 的 注册 文本 域 。 


S 538 


24.5 用 户 注册 资料 修改 模块 的 设计 


修改 用 户 注册 资料 的 过 程 就 是 在 用 户 数据 表 中 更 新 记录 的 过 程 。 下 面 重点 介绍 如 何在 用 
户 管理 系统 中 实现 用 户 资料 的 修改 功能 。 


24.5.1 修改 资料 页 面 


该 页 面 主要 把 用 户 所 有 资料 都 列 出 ， 通 过 【更 新 记录 】 命 令 实现 资料 修改 的 功能 。 有 具体 
操作 步骤 如 下 。 

ED 首先 制作 用 户 修改 资料 的 页 面 。 该 页 面 和 用 户 注册 页 面 的 结构 十 分 相似 ， 可 以 
通过 对 register.php 页 面 的 修改 来 快速 得 到 所 需要 的 记录 更 新 页 面 。 打 开 register.php 
页 面 ， 选 择 【 文 件 】 一 【另存 为 】 命 令 ， 打开 【另存 为 】 对 话 框 ， 将 该 文档 另存 为 
userupdate php， 如 图 24-68 所 示 。 

EECRDy 选择 【窗口 】 一 【服务 器 行为 】 命 令 ， 打 开 【 服 务 器 行为 】 面 板 。 在 该 面板 中 

We a 该 页 面 修改 完成 后 显示 如 图 24-69 所 示 。 
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图 24-68 【另存 为 】 对 话 框 24-69 ”userupdate.php 静态 页 面 


ECDB) 选择 【窗口 】 一 【 绑 定 】 命 令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 此 :按钮 ， 在 
弹出 的 下 拉 菜 单 中 选择 【记录 集 ( 查 询 )】 命 令 ， 则 会 打开 【记录 集 】 对 话 框 。 在 该 对 
话 框 中 进行 如 下 设置 。 

在 【名 称 】 文 本 框 中 输入 upuser 作为 该 记录 集 的 名 称 。 

从 【连接 】 下 拉 列 表 框 中 选择 user 数据 源 连 接 对 象 。 

从 【表格 】 下 拉 列 表 框 中 选择 使 用 的 数据 库 表 对 象 为 member。 

在 【 列 】 选 项 组 中 选中 【全 部 】 单 选 按钮 。 

在 【筛选 】 选 项 组 中 设置 记录 集 过 滤 的 条 件 为 usemame 为 =， 阶 段 变 量 为 
MM _userName。 

完成 后 的 设置 如 图 24-70 所 示 。 





| 室 江 当中 洲 _ 协 刀 江 胃 


警 浇 聘 束 卫 末 号 悦 泪 局 


和 
53@ 








网 页 设计 与 网 站 建设 
案例 课堂 (第 2 版 ) 8… 





EC 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 完 成 记录 集 的 绑 定 。 然 后 将 upuser 记录 集中 
的 字段 绑 定 到 页 面 上 相应 的 位 置 上 ， 如 图 24-71 所 示 。 











号 有 





请 用 户 认真 修改 注册 信息 8 











Cw | 





























24-70 ”定义 upuser 记录 集 24-71” 绑 定 动态 内 容 后 的 userupdate.php 页 面 


葬 于 BY 对 于 网 页 中 的 单 选 按钮 组 sex 对 象 ， 绑 定 动态 数据 可 以 按照 如 下 方法 ， 单 击 【 服 
务 器 行为 】 面 板 上 的 机 按钮 ， 在 弹出 的 下 拉 菜单 中 ， 选 择 【 动 态 表单 元 素 】-~~【 动 
态 单 选 按钮 组 】 命 令 ， 设 置 动态 单 选 按钮 组 对 象 ， 打 开 【 动 态 单 选 按钮 组 】 对 话 
框 ， 从 【 单 选 按钮 组 】 下 拉 列 表 杠 中， 选择 forml 表单 中 的 单 选 按钮 组 sex， 如 
图 24-72 所 示 。 

ECG 单 击 【 选 取 值 等 于 】 文 本 框 右 侧 的 型 按钮 ， 在 打开 的 【动态 数据 】 对 话 框 中 选 
择 记录 集 upuser 中 的 sex 字段 。 并 用 相同 的 方法 设置 【密码 提示 问题 】 的 列表 选 
项 ， 设 置 完成 后 对 话 框 如 图 24-73 所 示 。 



































动态 数据 

WS RR | | Cm 

| 

| 部 助 (00) | 

动态 单 选 按 钥 组 x 
单 过 扫 外 组 :755 在 素 弟 “Eoral” — = v 
千 了 人 等 于 Og = = 
和 格式 : 无 
fe |C?php echo $row_upuser[ sex ]; 7 
24-72 【动态 单 选 按钮 组 】 对 话 框 24-73 【动态 数据 】 对 话 框 


ET 单 击 【服务 器 行为 】 面 板 上 的 志 : 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【更 新 记录 】 
命令 ， 为 网 页 添加 更 新 记录 的 服务 器 行为 ， 如 图 24-74 所 示 。 

ED 打开 【更 新 记录 】 对 话 框 ， 该 对 话 框 与 插入 记录 的 对 话 框 十 分 相似 ， 有 具体 的 设 
置 情况 如 图 24-75 所 示 ， 这 里 不 再 重复 。 

EC 设置 完成 后 ， 单 击 【 确 定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 【文档 】 窗 口 ， 然 后 
选择 【文件 】 一 【保存 】 命 令 ， 将 该 文档 保存 到 本 地 站 点 中 。 
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图 24-74 ”选择 【更 新 记录 】 命 令 图 24-75 【更 新 记录 】 对 话 杠 答 乞 
理 
sm 由 于 本 页 的 MM_username 值 是 来 自 上 一 页 注册 成 功 后 的 用 户 名 值 ， 所 以 单独 测 对 


慌 。 试 时 会 提示 出 错 。 要 先 登录 后 ， 在 登录 成 功 页 面 中 单 击 【 修 改 你 的 注册 资料 】 超 链接 
到 该 页 面 才 会 产生 效果 ， 这 在 后 面 的 测试 实例 中 将 进行 介绍 。 


24.5.2 ”更 新 成 功 页 面 


用 户 修改 注册 资料 成 功 后 ， 就 会 转 到 userupdateok.php 页 面 。 在 该 网 页 中 ， 应 该 向 用 户 显 
示 资 料 修改 成 功 的 信息 。 除 此 之 外 ， 还 应 该 考虑 两 种 情况 ， 如 果 用 户 要 继续 修改 资料 ， 则 为 
其 提供 一 个 返回 到 userupdate.php 页 面 的 超 文本 链接 ， 如 果 用 户 不 需要 修改 资料 ， 则 为 其 提供 
一 个 转 到 用 户 登 录 页 面 mdex.php 页 面 的 超 文本 链接 。 
具体 操作 步骤 如 下 。 
EDP 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 中 的 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
userupdateok.php 的 网 页 并 保存 。 
EEDRP29 为 了 向 用 户 提供 更 加 友好 的 
界面 ， 应 该 在 网 页 中 显示 用 户 修 
改 的 结果 ， 以 供用 户 检查 修改 是 
否 正确 。 我 们 首先 应 该 定义 一 个 
记录 集 ， 然 后 将 绑 定 的 记录 集 插 
入 到 网 页 中 相应 的 位 置 ， 其 方法 
和 制作 页 面 userupdate.php 中 的 
方法 一 样 。 通 过 在 表格 中 添加 记 
录 集 中 的 动态 数据 对 象 ， 把 用 户 
修改 后 的 信息 显示 在 表格 中 (这 里 
不 再 详细 说 明 ， 请 参考 前 面 一 小 
节 )， 最 终结 果 如 图 24-76 所 示 。 











24-76 更 新 成 功 页 面 
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24.5.3 ”修改 资料 功能 的 测试 


编辑 工作 完成 后 ， 就 可 以 测试 该 修改 资料 功能 的 选择 情况 了 。 具 体操 作 步 又 如 下 。 

ETD 打开 下 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 文 
件 ， 在 该 页 面 中 进行 登录 。 登 录 成 功 后 进入 welcome.php 页 面 ， 在 welcome.php 页 面 
中 单 击 【修改 你 的 资料 】 超 链接 ， 转 到 userupdate.php 页 面 ， 如 图 24-77 所 示 。 

EEJpy 在 该 页 面 中 进行 一 些 修改 ， 然 后 单 击 【 修 改 】 按 钮 将 修改 结果 发 送 到 服务 器 
中 。 当 用 户 记录 更 新 成 功 后 ， 浏 览 器 会 转 到 userupdateok.php 页 面 中 ， 显 示 修 改 资料 
成 功 的 信息 ， 同 时 还 显示 了 该 用 户 修改 后 的 资料 信息 ， 并 提供 转 到 更 新 成 功 页 面 和 
转 到 主页 面 的 链接 对 象 ， 这 里 对 丙 实 手 名 进行 了 修改 ， 效果 如 图 2 24-78 所 示 。 








te 
投放 的 号 区 ] 
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图 24-77 修改 刘 莉 用 户 注册 资料 图 24-78 更 新 记录 成 功 显示 页 面 


24.6 ”密码 查询 模块 的 设计 


在 用 户 注册 页 面 中 ， 设 计 问题 和 答案 文本 框 ， 它 们 的 作用 是 当 用 户 忘记 密码 时 ， 可 以 通 
过 这 个 问题 和 答案 到 服务 器 中 找 回 遗失 的 密码 。 实 现 的 方法 是 判断 用 户 提供 的 答案 和 数据 库 
中 的 答案 是 否 相 同 ， 如 果 相 同 ， 则 可 以 找 回 遗失 的 密码 。 


24.6.1 密码 查询 页 面 


下 面 主要 制作 密码 查询 页 面 lostpassword.php， 上 有 具体 操作 步骤 如 下 。 

ECEDDp 选择 【文件 】 一 【新 建 】 命令， 打开 【新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 项 卡 
中 的 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 【无 】 选 
项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 





网 站 根 目录 下 新 建 一 个 名 为 lostpassword.php 密码 查询 : 
的 网 页 并 保存 。lostpassword.php 页 面 是 用 站 ee 
来 让 用 户 提交 要 查询 遗失 密码 的 用 户 和 名 的 “一 国 国 | 
页 面 。 该 网 页 的 结构 比较 简单 ， 设计 后 的 图 24-79 lostpassword php 页 面 
效果 如 图 24-79 所 示 。 


EEDPpy 在 【文档 】 窗 口中 选中 表单 对 象 ， 然 后 在 其 对 应 的 【属性 】 面 板 中， 在 【表单 
ID】 文本 框 中 输入 form1， 在 【动作 】 文 本 框 中 输入 showquestion.php 作为 该 表单 提 
交 的 对 象 页 面 。 在 【方法 】 下 拉 列 表 框 中 选择 POST 作为 该 表单 的 提交 方式 ， 接 下 
来 将 输入 用 户 名 的 文本 域 命名 为 mputname， 如 图 24-80 所 示 。 
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1 设置 表单 提交 的 动作 为 showquestion.php， 方法 为 POST |! 
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图 24-80 设置 表单 提交 的 动态 属性 


表单 属性 设置 面板 中 的 主要 选项 作用 如 下 。 

、 @ 在 【表单 ID】 文 本 框 中 ， 输 入 标志 该 表单 的 唯一 名 称 。 命 名 表单 后 ， 就 可 
以 使 用 脚本 语言 (如 JavaScript) 引 用 或 控制 该 表单 。 如 果 不 命名 表单 ， 则 
Dreamweaver CC 使 用 语法 forml1、form2.… 生 成 一 个 名 称 ， 并 在 向 页 面 中 添 
加 每 个 表单 时 递增 了 的 值 。 

@ 在 【方法 】 下 拉 列 表 框 中 ， 选 择 将 表单 数据 传输 到 服务 器 的 方法 。POST 方 
法 将 在 HTTP 请 求 中 嵌入 表单 数据 。GET 方法 将 表单 数据 附加 到 请 求 该 页 
面 的 URL 中 ， 是 默认 设置 ， 但 其 缺点 是 表单 数据 不 能 太 长 ， 所 以 本 例 选择 
POST 方法 。 

@ 【目标 】 下 拉 列 表 框 用 于 指定 返回 窗口 的 显示 方式 ， 各 目标 值 含义 如 下 。 
e。_blank 在 未 命名 的 新 窗口 中 打开 目标 文档 。 
 ” _parent 在 显示 当前 文档 的 窗口 的 父 窗口 中 打开 目标 文档 。 

多 _self 在 提交 表单 所 使 用 的 窗口 中 打开 目标 文档 。 
多 _top 在 当前 窗口 的 窗 体内 打开 目标 文档 。 此 值 可 用 于 确保 目标 文档 占 
用 整个 窗口 ， 即 使 原始 文档 显示 在 框架 中 。 


当 用 户 在 lostpassword.php 页 面 中 输入 用 户 名 并 单 击 【提交 】 按 钮 后 ， 这 时 会 通过 表单 将 
用 户 名 提交 到 showquestion.php 页 面 中 。 该 页 面 的 作用 就 是 根据 用 户 名 从 数据 库 中 找到 对 应 的 
记录 的 提示 问题 并 显示 在 showquestion.php 页 面 中 ， 用 户 在 该 页 面 中 输入 问题 的 答案 。 
下 面 制作 显示 问题 的 页 面 。 具 体操 作 步 骤 如 下 。 
EEC 新 建 一 个 文档 。 设 置 好 网 页 属性 后 ， 输 入 网 页 标题 【查询 问题 】， 选 择 【 文 
件 】 一 【保存 】 命 令 ， 将 该 文档 保存 为 showquestion.php。 


| 室 江 当中 济 二 刀 江 畏 


芍 沙 聘 束 卫 末 号 司 泪 局 
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才思 
网 关 更 人 PO 








图 24-81 showquestion.php 静态 网 页 


ECDIS 在 【文档 】 窗 口中 选中 表单 对 象 ， 在 其 对 应 的 【属性 】 面 板 中 ， 在 【动作 】 文 
本 框 中 输入 showpassword.php 作为 该 表单 提交 的 对 象 页 面 。 在 【方法 】 下 拉 列 表 框 
中 选择 POST 作为 该 表单 的 提交 方式 ， 如 图 24-82 所 示 。 接 下 来 将 输入 密码 提示 问 
题 答案 的 文本 域 命名 为 inputanswer。 

















forml | 方法 POST - 编码 类 型 








类 型 可 音 行 @ 。 口 多 行 田 门窗 名 
多 








24-82 ”设置 表单 提交 的 属性 


EC 选择 【窗口 】 一 【 绑 定 】 命 令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 外 按钮 ， 
在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 则 会 打开 【记录 集 】 对 话 框 。 

区 了 BY 在 该 对 话 框 中 进行 如 下 设置 。 

在 【名 称 】 文 本 框 中 输入 Recordsetl 作为 该 记录 集 的 名 称 。 

从 【连接 】 下 拉 列 表 框 中 选择 user 数据 源 连接 对 象 。 

从 【表格 】 下 拉 列 表 框 中 选择 使 用 的 数据 库 表 对 象 为 member。 

在 【 列 】 选 项 组 中 选中 【 选 定 的 】 单 选 按钮 ， 然 后 从 下 方 的 列表 框 中 选择 usermame 


和 question 。 
e 在 【筛选 】 选 项 组 中 ， 设 置 记 录 集 过 滤 的 条 件 为 : usemame 为 =， 表 单 变量 为 








inputname， 表 示 根 据 数据 库 中 usemame 字段 的 内 容 是 否 和 从 上 一 个 网 页 的 表单 中 的 
inputname 表单 对 象 传递 过 来 的 信息 完全 一 致 来 过 滤 记 录 对 象 。 








| 室 江 当中 洲 _ 协 刀 江 展 









































完成 后 的 设置 如 图 24-83 所 示 。 
记录 此 X 
名 称 ; |Recordset1 确定 
连接 :se [是 一 0 
| SN ' 
FRR [| | 运用 表单 变量 ! 

人 © Ey = -7 村 | inputname 来 作 1 费 
Pe 加 | 为 提示 问题 的 利 ! 六 
i 、 选 条 件 ! 

征 先 : usernane v 本 各 ~ 
表单 交 量 ~ hsernane 理 
排序 :无 ~ v 芭 











图 24-83 【记录 集 】 对 话 杠 


TY 设置 完成 后 ， 单 击 该 对 话 框 中 的 【确定 】 按 钮 ， 关 闭 该 对 话 框 。 返 回 到 【 文 
档 】 窗 口 。 将 Recordsetl 记录 集中 的 question 字段 绑 定 到 页 面 上 相应 的 位 置 ， 如 
图 24-84 所 示 。 


1 将 question 字段 绑 定 
到 页 面 上 相应 的 位 置 





图 24-84 ” 绑 定 字段 


GET 选择 【插入 】--【 表 单 】--【 隐 藏 】 命 令 ， 在 表单 中 插入 一 个 表单 隐藏 区 域 ， 
然后 将 该 隐藏 区 域 的 名 称 设置 为 usemame， 如 图 24-85 所 示 。 











24-85 ”插入 隐藏 区 域 


EEJe) 选中 该 隐藏 区 域 ， 转 到 【 绑 定 】 面 板 ， 将 Recordsetl 记录 集中 的 username 字段 


绑 定 到 该 表单 隐藏 区 域 中 ， 如 图 24-86 所 示 。 
Sn 当 用 户 输入 的 用 户 名 不 存在 时 ， 即 记录 集 Recordsetl 为 空 时 ， 就 会 导致 该 页 面 不 
SS 能 正常 显示 ， 这 就 需要 设置 隐藏 区 域 。 


EEC 在 【文档 】 窗 口中 选中 当 用 户 输入 用 户 名 存在 时 显示 的 内 容 即 整个 表单 ， 然 后 
单 击 【 服 务 器 行为 】 面 板 上 的 名 按钮 ， 在 弹出 的 菜单 中 ， 选 择 【 显 示 区 域 】 一 【如 
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果 记 录 集 不 为 空 则 显示 】 命 令 ， 则 会 打开 【如 果 记录 集 不 为 空 则 显示 】 对 话 框 ， 在 

该 对 话 框 中 选择 记录 集 对 象 为 Recordsetl 。 这 样 只 有 当 记 录 集 Recordsetl 不 为 空 

时 ， 才 显示 出 来 。 设 置 完成 后 ， 单 击 【确定 】 按 钮 ， 如 图 24-87 所 示 。 关 闭 该 对 话 

框 ， 返 回 到 【文档 】 窗 口 。 

| me 字段 绑 定 到 
本 该 表单 隐藏 区 域 中 


es 

















如 果 记 录 集 不 为 空 则 显示 x 
i 记录 集 Recordsetl ~ 
由 st 天 可 | 
代码; [Cply echo Sron Reordaettf aser) | 者 有 
图 24-86 ” 绑 定 到 表单 隐藏 区 域 24-87 【如 果 记录 集 不 为 空 则 显示 】 对 话 杠 


ED 在 网 页 中 编辑 显示 用 户 名 不 存在 时 的 文本 【该 用 户 名 不 存在 ! 】， 并 为 这 些 内 
容 设 置 一 个 【如 果 记 录 集 为 空 则 显示 】 隐 藏 区 域 服务 器 行为 ， 这 样 当 记录 集 
Recordsetl 为 空 时 ， TT 澡 碟 后 的 网 由 各 国 24 88 所 示 。 


! 为 页 面 设计 
“条 件 显示 ! 
1 
上 





24.6.2 ”完善 密 


当 用 户 在 showquestion.php 页 面 中 输入 答案 ， 单 击 【 提 交 】 按 钮 后 ， 服 务 器 就 会 把 用 户 名 
和 密码 提示 问题 答案 提交 到 showpassword.php 页 面 中 。 下 面 介绍 如 何 设计 该 页 面 。 

有 具体 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 中 的 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
showpassword.php 的 网 页 并 保存 。 

EEC 在 Dreamweaver CC 中 使 用 提供 的 制作 静态 网 页 的 工具 ， 完 成 如 图 24-89 所 示 的 
静态 部 分 。 

EB> 选择 【窗口 】 一 【 绑 定 】 命 令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 凶 按 钮 ， 





在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 则 会 打开 【记录 集 】 对 话 框 。 


让 食堂 采购 更 加 简单 


EE 
We 






坦 词 结果 
不 起 您 箱 入 的 香 寺 不正 确 ， 请 去 这 时 重新 条 入 4 
用 户 : mm 
定 D: mm 
单 击 这 里 重 关 登录 
涂 缚 直达 者 加 生产 来 材 直 仿 健 才 香 品 
同城 免费 能 名 司 衣 融 质 氏 隆 而 的 站 后 


图 24-89 showpassword.php 静态 设计 


EC 在 该 对 话 框 中 进行 如 下 设置 。 

e ”在 【名 称 】 文 本 框 中 输入 Recordsetl 作为 该 记录 集 的 名 称 。 

e@ ”从 【连接 】 下 拉 列 表 框 中 选择 user 数据 源 连接 对 象 。 

e@ ”从 【表格 】 下 拉 列 表 框 中 选择 使 用 的 数据 库 表 对 象 为 member。 
bd 


在 【 列 】 选 项 组 中 选中 【 选 定 的 】 单 选 按钮 ， 然 后 选择 字段 列表 框 中 的 username、 


password 和 answer 等 3 个 字段 就 行 了 。 


e 在 【筛选 】 选 项 组 中 设置 记录 集 过 滤 的 条 件 : answer 为 =， 表 单 变量 为 
inputanswer， 表 示 根 据 数据 库 中 answer 字段 的 内 容 是 否 和 从 上 一 个 网 页 的 表单 中 的 


inputanswer 表单 对 象 传递 过 来 的 信息 完全 一 致 来 过 滤 记 录 对 象 。 
完成 的 设置 情况 如 图 24-90 所 示 。 














记 归 站 二 和 让 这 二 站 二 
1 
oh ecorasetl | 1)! 
连接 [wr J /上 
表格 -nenber 0 MR 和 
站 列 D 人 @ 放 的 -一 一 
12. 设 置 answer 的 得 攻 四 
1 选项 为 表单 变量 中 1 _ | 。 BE 汪 
1 的 inputanswer 值 | | 广 TSES=< LE S 
站 二 证 对 SEE C7 esse 
排序 : 无 vi 遍 ~ 








图 24-90 【记录 集 】 对 话 框 


EECSDp 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 【文档 】 窗 口 。 将 记录 集中 的 


username 和 password 两 个 字段 分 别 添加 到 网 页 中 ， 如 图 24-91 所 示 。 


| 室 江 当中 洲 _ 协 志江 必 


警 浇 聘 束 也 末 号 悦 泪 局 





.人 按 住 ca 键 选择 其 中 
区 | 的 username 、password 


和 answer 等 3 个 字段 


. 
sg 
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查询 结果 
对 不 起 效 输 入 的 答案 不 正确 ,请 单 击 这 里 重新 辆 入 


1 将 绑 定 的 2 个 字 
1 段 插入 到 页 面 中 


A fhecordsetl We 








24-91 ”加 入 的 记录 集 效果 


EC 同样 ， 需 要 根据 记录 集 Recordsetl 是 否 为 空 ， 为 该 网 页 中 的 内 容 设 置 隐藏 区 域 
的 服务 器 行为 。 在 【文档 】 窗 口中 ， 选 中 当 用 户 输 入 密码 提示 问题 答案 正确 时 显示 
的 内 容 ， 然 后 单 击 【 服 务 器 行为 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 单 中 ， 选 择 
【显示 区 域 】 一 【如 果 记 录 集 不 为 空 则 显示 】 命 令 ， 打 开 【 如 果 记 录 集 不 为 空 则 显 
示 】 对 话 框 ， 在 该 对 话 框 中 选择 记录 集 对 象 为 Recordsetl 。 这 样 只 有 当 记录 集 
Recordsetl 不 为 空 时 ， 才 显示 出 来 ， 如 图 24-92 所 示 。 设 置 完成 后 ， 单 击 【 确 定 】 按 
钮 ， 关 闭 该 对 话 框 ， 返 回 到 【文档 】 窗 口 。 

EEC 在 网 页 中 选择 当 用 户 输入 密码 提示 问题 答案 不 正确 时 显示 的 内 容 ， 并 为 这 些 内 
容 设 置 一 个 【如 果 记 录 集 为 空 则 显示 】 隐 藏 区 域 服 务 器 行为 ， 这 样 当 记 录 集 
Recordsetl 为 空 时 ， 显 示 这 些 文本 ， 如 图 24-93 所 示 。 





如 果 记 录 集 不 为 则 显示 x 如 果 记 录 集 为 裤 则 显示 x 
记录 入: Recorasoti 记录 焦 : [RE 司 ”| [EE 王 到 
取消 | 取消 
| 帮助 





图 24-92 【如 果 记 录 集 不 为 空 则 显示 】 对 话 框 24-93 【如 果 记 录 集 为 空 则 显示 】 对 话 框 


ECERE9 完成 后 的 网 页 如 图 24-94 所 示 。 选 择 【 文 件 】 一 【保存 】 命 令 ， 将 该 文档 保存 到 
本 地 站 点 中 。 


让 食堂 采购 更 加 阐 单 








六 人 
网 关 志 和 [ 忆 到 不 亩 全 站 加 


24-94 ”完成 后 的 网 页 效果 


24.6.3 ”密码 查询 模块 的 测试 


编辑 工作 完成 后 ， 就 可 以 测试 密码 查询 模块 功能 的 选择 情况 了 。 具 体操 作 步 又 如 下 。 
EEDp 打开 正 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 文 
件 ， 如 图 24-95 所 示 。 


1 宣 凑 沽 间 吵 苦 _ 醋 刀 沂 音 


让 食堂 采购 更 加 简单 





车 注册 不 汪 栖 革 司 由 局 


优选 一 品 

到 ZR 困 香 浓郁 甘 耐 味 厚 
国画 @ 线 上 果 货 线 下 取 货 

安全 /方便 /放心 ! 






"和 


图 24-95 用 户 管理 系统 主页 
EC 单 击 【 找 回 密码 】 超 链接 ， 进 入 【密码 查询 】 页 面 ， 在 【用 户 名 】 文 本 框 中 输 
















EECEF 
ER 一 SS 


二 St 






密 枉 佑 询 
用 Pa 请 
EE 3 
本 且 直达 者 加 生产 CB +*eis Ls) 全 康生 
网 减免 扫 生 全 皮 瑞星 强 二 


图 24-96 【密码 查询 】 页 面 


国 于 BY 单 击 【 提 交 】 按 钮 ， 进 入 【查询 问题 】 页 面 ， 在 其 中 根据 提示 输入 问题 的 答 
案 ， 如 图 24-97 所 示 。 

EEC》 单 击 【提交 】 按 钮 ， 进 入 【查询 结果 】 页 面 ， 如 果 问 题 回 答 正确 ， 则 在 该 页 面 
中 显示 用 户 的 名 称 和 密码 信息 ， 则 密码 查询 成 功 ， 如 图 24-98 所 示 。 

EEJDp 如 果 在 【查询 问题 】 页 面 中 输入 的 问题 答案 和 注册 时 输入 的 不 一 样 ， 在 单 击 
【提交 】 按 钮 后 ， 会 显示 如 图 24-99 所 示 的 提示 信息 ， 提 示 用 户 问题 回答 错误 。 


. 
549 铭 


网 页 设计 与 网 站 建设 
案例 课堂 (第 2 版 ) @ 一 











查询 问题 


问题 提示 : 。 你 最 好 的 朋友 
问题 答案 ;吴宇 


用 户 : 刘 痢 


密码 : 123456 
单 击 这 里 重新 登录 





24-97 【查询 问题 】 页 面 图 24-98 【查询 结果 】 页 面 


EGRD 这 时 单 击 【 这 里 】 超 链接 ， 会 返回 到 【密码 查询 】 页 面 当中 ， 如 图 24-100 所 
示 。 这 就 说 明 密码 查询 模块 功能 测试 成 功 。 


网 上 菜市 场 © rh @ -= 





查询 结果 
对 不 起 您 输入 的 管 案 不 正确 ， 请 单 击 这 里 重新 输入 ! 

















图 24-99 ”提示 信息 页 面 图 24-100 ”返回 到 【密码 查询 】 页 面 
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第 25 章 


综合 应 用 案例 2 一 一 
开发 信息 资讯 


管理 系统 


、 企 业 状 


资讯 管理 系统 是 动态 网 站 建设 中 最 常见 的 系统 ， 几 乎 每 一 个 网 站 都 有 信息 


资讯 管理 系统 ， 尤 其 是 政府 部 门 、 教 育 系 统 或 企业 网 站 。 信 息 资讯 管理 系统 的 作用 
就 是 在 网 上 发 布 信息 ， 通 过 对 信息 的 不 断 更 新 ， 让 用 户 及 时 了 解 行业 信息 


况 或 其 他 信息 。 
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25.1 系统 的 功能 分 析 


在 开发 动态 网 站 之 前 ， 需 要 规划 系统 的 功能 和 各 个 页 面 之 间 的 关系 ， 绘 制 出 系统 脉络 
图 ， 这 样 方便 后 面 整 个 系统 的 开发 与 制作 。 


25.1.1 规划 网 页 结构 和 功能 


信息 资讯 管理 系统 中 涉及 的 主要 操作 就 是 访问 者 的 信息 查询 功能 和 系统 管理 员 对 信息 内 
容 的 新 增 、 修 改 及 删除 功能 。 本 章 将 要 制作 的 信息 资讯 管理 系统 的 网 页 结构 如 图 25-1 所 示 。 


信息 资讯 管理 系统 













访问 者 页 面 








admin login.php 


type_delphp information_add.php 


25-1 ”信息 资讯 管理 系统 网 页 结构 


网 站 的 信息 资讯 管理 系统 ， 在 技术 上 主要 体现 为 如 何 显示 信息 内 容 ， 用 模糊 关键 字 进 行 
查询 信息 ， 以 及 对 信息 及 信息 分 类 的 修改 和 删除 。 一 个 完整 信息 资讯 管理 系统 共 分 为 两 大 部 
分 : 一 个 是 访问 者 访问 信息 的 动态 网 页 部 分 ， 另 一 个 是 管理 者 对 信息 进行 编辑 的 动态 网 页 部 
分 。 本 系统 页 面 共有 11 个 ， 整 体系 统 页 面 的 功能 与 文件 名 称 如 表 25-1 所 示 。 








全 5 





表 25-1 信息 资讯 管理 系统 开发 网 页 设计 


需要 制作 的 主要 页 面 页 面 名 称 功 能 
网 站 首页 index php 显示 信息 分 类 和 最 新 信息 页 面 














信息 分 类 页 面 fypephp 显示 信息 分 类 中 的 信息 标题 页 面 
信息 内 容 页 面 content.php 显示 信息 内 容 页 面 
后 台 管 理 入 口 页 面 管理 者 登录 入 口 页 面 








后 台 管 理 主页 面 对 信息 进行 管理 的 主要 页 面 
新 增 信息 页 面 information add.php 增加 信息 的 页 面 

修改 信息 页 面 修改 信息 的 页 面 

删除 信息 页 面 删除 信息 的 页 面 

新 增 信息 分 类 页 面 增加 信息 分 类 的 页 面 

修改 信息 分 类 页 面 修改 信息 分 类 的 页 面 

删除 信息 分 类 页 面 删除 信息 分 类 的 页 面 


25.1.2 ”页 面 设计 规划 


在 本 地 站 点 建立 站 点 文件 夹 news， 将 要 建立 制作 信息 资讯 系统 的 文件 和 文件 夹 如 图 25-2 
所 示 。 
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25-2 ”规划 站 点 文件 和 文件 夹 
25.1.3 ”网 页 美工 设计 


信息 资讯 管理 系统 主要 起 到 了 对 行业 信息 进行 宣传 的 作用 ， 在 色调 上 可 以 选择 简单 的 蓝 
色 作 为 主 色调 。 信 息 首 页 index.php 的 效果 如 图 25-3 所 示 。 
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25-3 ”信息 首页 index.php 的 效果 


25.2 ”数据 库 设 计 与 连接 


本 节 主 要 讲述 如 何 使 用 phpMyAdmin 建立 信息 管理 系统 的 数据 库 ， 如 何 使 用 
Dreamweaver 在 数据 库 与 网 站 之 间 建 立 动态 连接 。 


25.2.1 数据 库 设计 


信息 资讯 管理 系统 需要 一 个 用 来 存储 信息 标题 和 信息 内 容 的 信息 表 information， 还 要 建立 
一 个 信息 分 类 表 information_type 和 一 个 管理 员 账 号 信息 表 admin。 信 息 数据 表 information、 信 
息 分 类 数据 表 information_ type 和 管理 信息 数据 表 admin 的 字段 分 别 采 用 如 表 25-2、 表 25-3、 
表 25-4 所 示 的 结构 。 


表 25-2 信息 数据 表 information 











字段 模 太 数据 类 型 | 主键 | 外 键 | 非 空 | 叭 -| 默认 什 
aa jmme@ | 是 | 在 | 是 | 是 | 无 | 
PET | 吾 | 下 | 冯 | 下 | 至 


信息 分 类 编号 | type id INT(8) 是 
信息 内 容 inf content TEXT 否 
信息 加 入 时 间 | inf time DATETIME 否 
编辑 者 inf author | VARCHAR(20) 


字段 描述 数据 类 型 
信息 分 类 编号 i INT(8) 
信息 分 类 名 称 1 VARCHAR(50) 





















表 25-4 ”管理 信息 数据 表 admin 











创建 数据 库 的 具体 操作 步骤 如 下 。 
ED 启动 pbppMyAdmin， 在 主 界面 的 左 侧 列表 中 单 击 【 新 建 】 链 接 ， 如 图 25-4 所 示 。 
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图 25-4 phpMyAdmin 的 工作 界面 


EC) 在 文本 框 中 输入 要 创建 数据 库 的 名 称 
news， 然 后 单 击 【 创 建 】 按 钮 ， 如 图 25-5 4 SL 和 WE IIP 加 5 回 SA dp 放生 
所 示 。 

GET 接着 就 要 回 到 phpMyAdmin 的 管理 界 
面 ， 为 MySQL 中 的 news 数据 库 添加 数 站 i 
据 表 。 在 左 侧 列表 中 选择 创建 的 news 数 
据 库 ， 然 后 在 右 侧 的 页 面 中 输入 添加 的 数 
据 表 名 称 和 字段 数 ， 然 后 单 击 【 执 行 】 按 
钮 ， 如 图 25-6 所 示 。 


phpMyAdmin ~— 
全 加 回 @ 














数据 库 


25-5 创建 数据 库 news 
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25-6 ”新 建 数据 表 information 
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EC 请 按照 表 25-2 中 的 内 容 设 置 数据 表 ， 添 加 的 数据 表 字 段 如 图 25-7 所 示 。 
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图 25-7 添加 数据 表 字段 


EEC 在 设置 完毕 之 后 ， 单 击 【 保 存 】 按 钮 ， 即 可 查看 information 数据 表 ， 如 图 25-8 
| 所 示 。 





器 服 务 器 : mysql wampserver > 血 数据 库 : news * 困 未 - information 


国 河 呈 结 构 局 SQL 马 搜 索 了 插入 时 号 到 导入 = 权限 


关 名 字 类 型 排序 规则 属性 。 空 默认 梧 外 操作 
加 1 int_id int(8) Wai 再 下 fm OnsD 
2 inftite varchar(50) gb2312_chinese_ci 否 无 从 疏导 性 
加 3 gpeid int8) 否 天 SK OW:D 
4 inf_content text 9b2312_chinese_ci 亚 无 他 个 改 四 删除 办 
加 5 inftime 。 datetime 否 无 SHA OW 户 
D6 inf_author varchar(20) gb2312_chinese_ci 否 无 人 个 改 四 出 只 性 


图 25-8 information 数据 表 


ECRUD 选择 infomation 数据 表 ， 单 击 菜单 上 的 【插入 】 链 接 。 依 照 字 段 的 顺序 ， 将 对 
应 的 数值 依次 输入 ， 单 击 【执行 】 按 钮 ， 即 可 插入 数据 ， 如 图 25-9 所 示 。 
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25-9 插入 数据 





按照 图 25-10 所 示 的 数据 ， 重 复 执行 上 一 步 的 操作 ， 将 数据 输入 到 数据 表 中 。 


inf_id inf_tite type_id inf_content inf time inf_author 
23 。 赶 走 小 肥 内 ,秋天 正当 时 2 ”这 里 是 测试 内 容 2017-11-04 12-00:00 王晓明 
24 ”秋分 过 后 早 晓 温差 大 医生 得 本 出 外 运动 添 衣 哥 芽 4 ”这 是 内 容 2017-11-05 00:00:00 小 各 
26 ”人 金秋 天 气 京 ， 牢记 养生 歌 2 ”测试 2017-11-08 00-00:00 蓝天 
27 ”秋天 容易 感冒 怎么 办 ? 三 种 饮品 助 你 快 点 好 2 测试 2017-11-08 00.00.00 admin 
28 ” 谈 共 必要 论 水 四 种 水 ， 哪 一 种 更 利于 泡 茶 ? 3 测试 2017-07-20 01-00:00 admin 
29 ”7 款 健康 养生 沉 有 效 调 理 防治 衣 炎 2 Wt 2017-11-05 02:06:00 admin 
30 ”秋天 养生 汤 首选 5 款 保健 蔬 荣 2 测试 2017-11-09 04:00:00 小 兰 
31 ”秋季 干燥 上 火 4 大 食疗 方 降 火 润 烷 3 测 坛 2017-11-11 18.00.00 小 花 


25-10 information 表 中 的 输入 记录 


EEJB 用 上 述 方法 ， 参 照 表 25-3 和 表 25-4， 创 建 一 个 名 称 为 information_type 和 名 称 
为 admin 的 数据 表 。 输 入 字段 名 称 并 设置 其 属性 ， 最 终 效果 如 图 25-11 和 图 25-12 
所 示 。 


涡 洲 山 融 污 注 刀 评 汪 着 一 一 Z 全 灯 泗 关东 其 坤 Sz 小 全 





图 上 月 务 器 : mysql wampserver ,图 孝 据 库 : news > 加 去 : admin 





车 服务 器 : mysql wampserver » 图 教 把 库 : news * 名 夫 : information_type| 


回 洲 ¥ 鸣 结 鬼 加 SQL 又 搜索 飞 所 A 加 有 ki 国 , 和 RM 续 和 上 四 -SQL A 雪 索 于 白 和 园 


# 名 字 类 型 排序 规则 属性 空 占 认 格外 # 名 字 类 型 排序 规则 属性 空 默认 
加 19peid int(8) UNSIGNED 否 元 回 1 username varchar(20) gb2312_chinese_ci 否 无 
口 2 type_name varchar(50) gb2312_chinese_ci 这 ， © 2 password varchar(20) geostd8_general_ci 否 无 

图 25-11 information_type 的 表 结 构 25-12 admin 的 表 结构 


ES 为 了 演示 效果 ， 分 别 对 information type 数据 表 和 admin 数据 表 添 加 记录 ， 如 
图 25-13 和 图 25-14 所 示 。 


type_id type_name 


2 养生 之 道 
3 饮食 养生 username password 
4 | 运动 养生 admin admin 
25-13 information_type 表 中 输入 的 记录 25-14 admin 表 中 输入 的 记录 


25.2.2 ”创建 数据 库 连接 


数据 库 编 辑 完成 后 ， 必 须 在 Dreamweaver CC 中 建立 数据 源 连接 对 象 。 这 样 做 的 目的 是 方 
便 在 动态 网 页 中 使 用 前 面 建立 的 信息 系统 数据 库 文件 和 动态 地 管理 信息 数据 。 具 体操 作 步 又 
如 下 。 
EEC 根据 前 面 讲 过 的 站 点 设置 方法 ， 设 置 好 “站 点 ”“ 文 档 类 型 ”“ 测 试 服务 
器 ”。 打 开创 建 的 index.php 页 面 ， 选 择 【 窗 口 】 一 【数据 库 】 命 令 ， 进 入 【数据 
库 】 面 板 。 单 击 【 数 据 库 】 面 板 中 的 了 出 按钮 ， 弹 出 如 图 25-15 所 示 的 菜单 ， 选 择 
【MySQL 连接 】 命 令 。 
EDp 进入 【MySQL 连接 】 对 话 框 后 ， 填 入 自 定义 的 连接 名 称 information， 填 入 
mysql 服务 器 的 用 户 名 和 密码 ， 单 击 【 选 取 】 按 钮 来 选取 连接 的 数据 库 ， 如 图 25-16 
所 示 。 
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连 挫 名 称 Enformation 
MySQL 服务 器 : Localhost 
用 户 名: root 


aa EE 
































BEE 














4 单 击 上 面 的 + 按钮 创建 连接 。 








图 25-15 ”连接 数据 库 25-16 【MySQL 连接 】 对 话 框 


EEDe) 打开 【选取 数据 库 】 对 话 框 ， 选 择 news 数据 库 ， 单 击 【 确 定 】 按 钮 ， 如 图 25-17 
所 示 。 

EU 返回 到 【MySQL 连接 】 对 话 框 后 ， 单 击 【 确 定 】 按 钮 。 返 回 到 Dreamweaver 
CC 后 ， 可 以 打开 【数据 库 】 面 板 ，news 数据 库 的 数据 表 在 连接 设置 后 已 经 读 入 
Dreamweaver CC 了 ， 如 图 25-18 所 示 。 
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[mE] 
取消 | 
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information 


information_type 














图 25-17 【选取 数据 库 】 对 话 框 图 25-18 【数据 库 】 面 板 

EEJDp 同时 ， 在 网 站 根 目录 下 将 会 自动 创建 名 为 Connections 的 文件 夹 ， 该 文件 夹 内 有 
一 个 名 为 information php 的 文件 ， 打 开 该 文件 ， 切 换 到 【 代码】 视图， 添加 以 下 代 
码 ( 见 图 25-19): 


mysql query("set character set 'gb2312'");// 读 数据 库 编码 
mysql_query ("set names 'gb2312'");// 写 数据 库 编码 








画 c\wanpwwwconnectionsinfomnation php” 









mysql_pconnect ($hostname_informati 
nformation, $password_information) or 


* 也 [站 | 于 蕉 | 灶 夸 徊 | 北口 




















25-19 ”添加 代码 


$ 558 


EC 在 Dreamweaver CC 界面 中 选择 【文件 】 一 【保存 】 命 令 ， 保 存 该 文档 ， 完 成 数 
据 库 的 连接 。 


25.3 ”系统 页 面 设计 


信息 资讯 管理 系统 前 台 部 分 主要 有 3 个 动态 页 面 ， 分 别 是 信息 主页 面 index.php、 信 息 分 
类 页 面 type.php 和 信息 内 容 页 面 newscontent.php。 


25.3.1 网 站 首页 的 设计 


下 面 主 要 介绍 信息 资讯 管理 系统 主页 面 index.php 的 制作 。 在 index.php 页 面 中 主要 有 显 
示 最 新 信息 的 标题 ， 信 息 的 加 入 时 间 ， 显 示 信 息 分 类 ， 单 击 信息 中 的 分 类 进入 分 类 子 页 面 以 
查看 信息 子 类 中 的 详细 信息 ， 点 击 信息 标题 进入 信息 详细 内 容 页 面 ， 对 信息 的 主题 内 容 进行 


N 

SN 
搜索 等 功能 。 NN 
1 制作 信息 分 类 模块 NS 


下 面 介绍 首页 中 信息 分 类 模块 的 制作 。 具 体操 作 步 又 如 下 。 
EE 打开 创建 的 index php 页 面 ， 输 入 网 页 标题 【健康 养生 网 首页 】， 选 择 【 文 件 】 
一 【保存 】 命 令 将 网 页 保存 ， 如 图 25-20 所 示 。 






蔷 沙 崩 丰 尖 嵌 名 齐 直 书 一 一 2 章 兰 洒 司 孙 训 ” 才 9Z 小 粳 


indexphp x 
代码 | 拆 分 设计 | 实时 视图 。 蜀 标题， 健康 着 生 网 首 页 








图 25-20 ”添加 网 页 标题 


EDp 选择 【修改 】 一 【页 面 属性 】 命 令 ， 打开 【 页 面 属性 】 对 话 框 ， 单 击 【 分 类 】 
列表 框 中 的 【外 观 (CSS)】 选 项 ， 字 体 大 小 设置 为 12px， 在 【上 边 距 】 文 本 框 中 输入 
0px， 这 样 设置 的 目的 是 让 页 面 的 第 一 个 表格 能 置顶 到 上 边 ， 如 图 25-21 所 示 。 

(ETRY 单 击 【确定 】 按 钮 ， 进 入 【文档 】 窗 口 ， 选 择 【 插 入 】 一 【表格 】 命 令 ， 打 开 
【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 4; 在 【 列 】 文 本 框 中 输入 2。 在 【表格 
宽度 】 文 本 框 中 输入 990 像素 ， 其 他 设置 如 图 25-22 所 示 。 
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EEZ 单 击 【确定 】 按 钮 ， 在 【文档 】 窗 口中 ， 插 入 了 一 个 4 行 2 列 的 表格 。 单 击 选 


择 插入 的 整个 表格 ， 在 【属性 】 面 板 的 【对 齐 】 下 拉 列 表 框 中 ， 选 择 【居中 对 齐 】 
选项 ， 让 插入 的 表格 居中 对 齐 ， 如 图 25-23 所 示 。 
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图 25-23 【属性 】 面板 


国 于 BY 将 光标 放置 在 第 1 行 第 1 列表 格 中 ， 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 命 
令 ， 打开 【 选 择 图 像 源 文件 】 对 话 框 ， 选 择 images 文件 下 的 logo.gif 图 像 ， 单 击 
【确定 】 按 钮 插入 图 片 ， 如 图 25-24 所 示 。 

EEC 将 光标 放置 在 第 1 行 第 2 列表 格 中 ， 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 命 


令 ， 打 开 【 选 择 图 像 源 文件 】 对 话 框 ， 选 择 images 文件 下 的 banner.gif 图 像 ， 单 击 
【确定 】 按 钮 插入 图 片 ， 如 图 25-25 所 示 。 
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seER | [We |] | 9 | Ws | [|] | | 
图 25-24 ”插入 logo.gif 图 像 


图 25-25 插入 banner.gif 图 像 
ESTDp 将 光标 放置 在 第 2 行 表格 中 ， 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 命 令 ， 打开 


【选择 图 像 源 文件 】 对 话 框 ， 选 择 images 文件 下 的 1.gif 图 像 ， 单 击 【 确 定 】 按 钮 插 
入 图 片 ， 这 样 就 完成 了 网 站 首页 头 部 的 设计 ， 如 图 25-26 所 示 。 





健康 养生 


wwwjkjan .com 





图 25-26 网 站 首页 头 部 的 设计 

EC 将 光标 放置 在 第 3 行 表格 中 ， 选 择 【 插 入 】 一 【表格 】 命 令 , 插入 一 个 1 行 3 
列 的 表格 ， 在 第 3 行 第 1 列表 格 中 插入 一 个 leftjpg 图 像 作为 背景 ， 效 果 如 图 25-27 
所 示 。 

















养生 分 类 


健康 按 索 





中 沙 风 玛 治 磺 如 刘坤 忆 一 一 齐 半 开局 孙 装 ” 贡 92 洲 鱼 


图 25-27 在 第 3 行 第 1 列 插入 背景 图 


ECERD) 将 光标 放置 在 第 3 行 第 3 列表 格 中 ， 在 其 中 插入 一 个 03.gif 图 像 作为 背景 ， 效 
果 如 图 25-28 所 示 。 
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25-28 在 第 3 行 第 3 列 插入 图 片 


EC 将 光标 放置 在 第 4 行 表格 中 。 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 命 令 ， 打 开 
【选择 图 像 源 文件 】 对 话 框 ， 在 对 话 框 中 ， 选 择 同 站 点 中 的 images 文件 夹 中 的 7.gif 
图 片 ， 如 图 25-29 所 示 。 

ECEIDp 将 光标 放置 在 第 3 行 第 1 列 的 表格 中 ， 选 择 【 插 入 】 一 【表格 】 命 令 ， 打 开 
【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 4， 在 【 列 】 文 本 框 中 输入 1。 在 【表格 
宽度 】 文 本 框 中 输入 92%， 其 【边框 粗细 】、【【 单 元 格 边 距 】 和 【单元 格 间距 】 都 
设 为 0， 如 图 25-30 所 示 。 
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养生 分 类 精品 推荐 


企 康 搜索 i 了 天 6 内 大 委 现 开标 和 的 


和 的 闪闪 * 如 采 自 己 和 


执 文 排行 


区 
NS 


[i 
es Ae 
更 上 站 合共 和 

回 汉 各 ! 移 全 后 术 人 在 碍 





EE 
并 枯 全 认 。 三 E 朋 1。 关 任 。 RR 和。 正 全 并 和 网 。 网上 条。 户 下 用 品 。 新科 广 风采 生 。 作 六 两。 全国 Et 吉 。 却 全 品 。 六 全 声 

全 和。 月 天 网 。 当天 120 网 。 气 欠 才 网 。 可 岳 生机 演 大 全 。 和 天 则 1275 网。 养 网 “网上 5。 [下 养生 。 天 学 二 114 。 本 要 
8 季 。 /人 NF。 包 各 二 网。 外 村 生活 小 只 。 旺 舟 网 。 PCCCF 区 


25-29 在 第 4 行 表格 中 插入 图 片 


本 EY 单 击 刚 创建 的 左边 空白 单元 格 ， 然 后 再 单 击 【 文 档 】 窗 口上 的 苹 移 中 按钮 ， 在 
<td> 和 </td> 之 间 加 入 valign="top" 命 令 ， 表 示 让 鼠标 能 够 自动 放置 至 单元 格 的 最 上 
方 ， 如 图 25-31 所 示 。 
















































































要 属 x 
表格 大 小 
行政 :区 下 
as | 代码 拆 妇 | 设计 “实时 视图 
边框 相 蜂 :[0_ | 像 过 [ 拆 分 ] i 哆 
单元 人 边 距 :5 ”加 /table》 蕊 
单元 格 间 中 :加 “] 加 he 
width="990” border= 
:= 国语 Ea “0” cellspacing="0" 
二 | cellpadding="0” 
无 两 者 tr 
辅助 攻 能 Sone td 
a width="227” height= 
这 “455" 回 
摘要 background= 
“images/left. jpg” 
table width="92%" 
i = 用 border="0” align= ~ 
图 25-30 【表格 】 对 话 框 25-31 加 入 命令 


EEC) 接 下 来 用 【 绑 定 】 面 板 将 网 页 所 需要 的 数据 字段 绑 定 到 网 页 中 。index.php 这 个 
页 面 使 用 的 数据 表 是 information 和 information type， 单 击 【 应 用 程序 】 面 板 组 中 
【 绑 定 】 面 板 上 的 出 按钮 ， 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 
【记录 集 】 对 话 框 中 输入 如 表 25-5 所 示 的 数据 ， 如 图 25-32 所 示 。 


表 25-5 “记录 集 ” 设 定 











属 性 设置 值 
名 称 Recordsetl 
连接 information 
表格 information type 
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EC ED》 绑 定 记 录 集 后 ， 将 记录 集中 信息 分 类 的 字段 type_name 插入 至 index.php 网 页 的 
适当 位 置 ， 如 图 25-33 所 示 。 









































| 
第 | 
吕 
和 
记录 生 x 综 
全 
. [J] 应 
| 车站 型 
一 一 例 
第 千 天 | 开 
排序 区 一 区 人 
上 县 
25-32 【记录 集 】 对 话 框 25-33 ”插入 至 index.php 网 页 中 号 SS 
系 包 
统 


由 于 要 在 index.php 这 个 页 面 中 显示 数据 库 中 所 有 信息 分 类 的 标题 ， 而 目前 的 设 
定 则 只 会 显示 数据 库 的 第 一 笔 数 据 ， 因 此 ， 需 要 加 入 【服务 器 行为 】 中 的 【重复 区 
域 】 命 令 ， 让 所 有 的 信息 分 类 全 部 显示 出 来 ， 选 择 {Recordsetl.type_name} 所 在 的 
行 ， 如 图 25-34 所 示 。 加 

EEID 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 出 按 钮 ， 在 弹出 的 菜单 
中 选择 【重复 区 域 】 命 令 ， 在 打开 的 【重复 区 域 】 对 话 框 中 ， 选 中 【所 有 记录 】 单 
选 按钮 ， 如 图 25-35 所 示 。 








重复 区 过 X 
记录 入 [ES 图 | 一 一 
10 
显示 : 〇 记录 一 
@ 所 和 ie 录 


{Recordsetl. type_name} 


图 25-34 ”选择 要 重复 显示 的 信息 图 25-35 【重复 区 域 】 对 话 框 


ED 单 击 【确定 】 按 钮 回 到 编辑 页 面 ， 会 发 现 先前 所 
选取 要 重复 的 区 域 左上 角 出 现 了 一 个 【重复 】 灰 色 
标签 ， 这 表示 已 经 完成 设置 ， 如 图 25-36 所 示 。 IE 

2. 转 到 详细 页 面 的 访问 设置 

在 本 程序 的 设计 上 ， 和 希望 用 户 在 浏览 信息 标题 页 面 后 ， 

可 以 选择 有 兴趣 的 主题 来 阅读 详细 内 容 。 而 选择 主题 再 转 到 :健康 搜索 
详细 页 面 ， 就 是 在 这 里 要 设置 的 。 

若 您 曾 使 用 过 Dreamweaver CC 开发 如 ASP 的 网 页 程 

序 ， 您 会 发 现在 PHP 的 环境 中 【服务 器 行为 】 面 板 似乎 少 了 
一 个 功能 : 【 转 到 细节 页 面 】。 其 实 不 只 少 了 这 个 功能 ， 只 不 过 这 个 功能 的 使 用 频率 较 高 
那么 该 怎么 办 呢 ? 








25-36 添加 重复 区 域 效果 
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这 里 要 使 用 由 www-.felixone:it 所 制作 的 <Mx682891 FX PHPMissingTools.mxp> 扩 充 程 
序 ， 可 以 在 该 作者 的 网 站 中 查找 并 下 载 安装 这 个 扩充 程序 ， 如 图 25-37 所 示 。 














辣 = | 51CTO 下 载 -DreamweaverCC 数 据 库 面板 本 口 x 
地 失 者 © 
< ~ 个 日 < pre- » 51CTO.. v | 局 妆 过 "51CTO 下 载 … 记 
~ ~ 
者 快速 访问 
国语 + 
易 下 过 本 
目 闻 + 
一 MX682891_FX_P shujuku.zxp 
园 豆 片 * ,HpMissingTools v 
2 个 项 目 。 选中 1 个 项 目 1.09 MB :=: 转 





25-37 ”查看 扩展 插件 


双击 Mx682891 FX PHPMissingTools.zxp 插件 ， 即 可 打开 许可 证 安装 窗口 ， 单 击 【 接 
受 】 按 钮 ， 将 自动 安装 该 插件 ， 如 图 25-38 所 示 。 

安装 完成 后 ， 在 插件 管理 器 窗口 中 即 可 看 到 刚刚 安装 的 插件 ， 如 图 25-39 所 示 。 如 果 不 
再 需要 ， 可 以 单 击 【 移 除 】 按 钮 ， 从 而 删除 该 插件 。 


证 


您 将 去 装 "PHp Missing Teols 扩展 。 增 续 扣 人 之 前 ， 请 仔细 阅读 以 下 内 容 。 





图 25-38 许可 证 安装 窗口 图 25-39 ”成 功 安装 插件 
Se 在 安装 完毕 之 后 ， 请 一 定 要 关闭 Dreamweaver CC 后 再 重新 打开 ， 以 确保 这 个 扩 


站 充 程 序 可 以 正确 使 用 。 


所 谓 “ 转 到 详细 页 面 ”， 也 就 是 用 户 在 选择 某 一 标题 的 文字 访问 后 会 转 到 另 一 个 页 面 来 
显示 该 主题 的 详细 内 容 。 但 是 另 一 个 页 面 怎 么 知道 要 从 数据 库 中 调 出 哪 一 个 记录 来 显示 呢 ? 
所 以 我 们 在 主页 面 上 的 访问 必须 要 带 一 个 值 让 详细 页 面 来 判断 ， 这 就 是 这 个 服务 器 行为 的 目 
的 。 下 面 是 设置 Go To Detail Page 的 具体 操作 步骤 。 

EEJD 为 了 实现 这 个 功能 ， 首 先 要 选取 编辑 页 面 中 的 信息 分 类 标题 字段 ， 如 图 25-40 

所 示 。 
EDD 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 外 按钮 ， 在 弹出 的 菜单 
中 选择 Go To Detail Page 命令 ， 如 图 25-41 所 示 。 


仿 564 








25-40 ”选择 信息 分 类 标题 





Go To Related Page B 


25-41 选择 Go To Detail Page 命令 


ECDIS 在 打开 的 Go To Detail Page 对 话 框 中 单 击 【 浏 览 】 按 钮 ， 打 开 【 选 择 文件 】 对 
话 框 ， 选 择 此 站 点 中 的 typephp， 如 图 25-42 所 示 。 
EZ 单 击 【 确 定 】 按 钮 ， 返 回 到 Go To Detail Page 对 话 框 ， 其 他 设 定 值 采 用 默认 


值 ， 如 图 25-43 所 示 。 
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图 25-42 【选择 文件 】 对 话 框 


ECRD 单 击 【确定 】 按 钮 回 到 编辑 页 面 ， 主 


图 25-43 ”Go To Detail Page 对 话 框 


页 面 index.php 中 信息 分 类 的 制作 已 经 完 


成 ， 最 新 信息 的 显示 页 面 设计 效果 如 图 25-44 所 示 。 
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3. 制作 信息 数据 读 取 模 块 


制作 完了 信息 分 类 栏目 后 ， 下 一 步 就 是 将 information 数据 表 中 的 信息 数据 读 取出 来 ， 并 
在 首页 上 进行 显示 。 

有 具体 操作 步骤 如 下 。 

EC 将 光标 放置 在 第 3 行 第 2 列 的 表格 中 ， 选 择 【 插 入 】 一 【表格 】 命 令 ， 打开 
【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 3， 在 【 列 】 文 本 框 中 输入 2， 在 【表格 
宽度 】 文 本 框 中 输入 92%， 其 【边框 粗细 】、【【 单 元 格 边 距 】 和 【单元 格 间距 】 都 
设 为 0， 如 图 25-45 所 示 。 

EEC) 单 击 【确定 】 按 钮 ， 即 可 在 网 页 中 插入 表格 ， 如 图 25-46 所 示 。 
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| El : 
图 25-45 【表格 】 对 话 框 图 25-46 插入 表格 


ECEDUB 合并 第 一 行 单元 格 ， 然 后 选择 【插入 】 一 【图 像 】 命 令 ， 打 开 【 选 择 图 像 源 文 
件 】 对 话 框 ， 在 其 中 选择 要 插入 的 图 片 ， 如 图 25-47 所 示 。 
EEC》 单 击 【确定 】 按 钮 ， 插 入 图 片 ， 如 图 25-48 所 示 。 
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图 25-47 ”选择 要 插入 的 图 片 图 25-48 插入 图 片 


革 于 BY 单 击 【 应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 四 按钮 ， 在 弹出 的 菜单 中 选择 
【记录 集 ( 查 询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 输入 如 表 25-6 所 示 的 数据 ， 
如 图 25-49 所 示 。 
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表 25-6 记录 集 Re1 设 定 
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图 25-49 【记录 集 】 对 话 框 


ES 插入 记录 集 后 ， 将 记录 集 的 字段 插入 至 index.php 网 页 的 适当 位 置 ， 如 图 25-50 
所 示 。 


最 新 养生 资讯 Information 





ja inf_title} Rel. inf_time} 





图 25-50 绑 定数 据 


ES 由 于 要 在 index.php 这 个 页 面 中 显示 数据 库 中 的 部 分 信息 ， 而 目前 的 设 定 则 只 会 
显示 数据 库 的 第 一 笔 数 据 ， 因 此 ， 需 要 加 入 【服务 器 行为 】 中 的 【重复 区 域 】 的 设 
置 来 重复 显示 部 分 信息 ， 单 击 选择 要 重复 显示 信息 的 那 一 行 ， 如 图 25-51 所 示 。 


最 新 养生 资讯 Information 


{Rel. inf_title} HRel. inf_time} 





图 25-51 单 击 需要 重复 的 表格 
ECEDRD) 单 击 【 应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 因 按 钮 ， 在 弹出 的 菜单 
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中 ,选择 【重复 区 域 】 命 令 ， 在 弹出 
的 【重复 区 域 】 对 话 框 中 ， 记 录 集 选 
择 Rel ， 要 重复 的 记录 条 数 设 为 10 2 EL "| ms 





: 























条 ， 如 图 25-52 所 示 。 i Tm 
TE> 单 击 【确定 】 按 钮 ， 回 到 编辑 页 

面 ， 会 发 现 先前 所 选取 要 重复 的 区 域 

左上 角 出 现 了 一 个 【重复 】 灰 色 标签 ， 图 25.52 【重复 区 域 】 对 话 框 

这 表示 已 经 完成 设 定 了 ， 如 图 25-53 

所 示 。 


| 量 新 养生 资讯 Information 





25-53 ”添加 重复 区 域 的 效果 


ED 由 于 最 新 信息 这 个 功能 ， 除 了 显示 网 站 中 部 分 信息 外 ， 还 要 提供 访问 者 感 兴趣 
的 信息 标题 以 链接 至 详细 内 容 来 阅读 。 首 先 选取 编辑 页 面 中 的 信息 标题 字段 ， 如 
图 25-54 所 示 。 


| 最 新 养生 资讯 Information 
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图 25-54 ”选择 信息 标题 字段 


四 > 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 负 按 钮 ， 在 弹出 的 菜单 
中 选择 Go To Detail Page 命令 ， 在 打开 的 Go To Detail Page 对 话 框 中 单 击 【浏览 】 
按钮 ， 打 开 【 选 择 文件 】 对 话 框 ， 选 择 此 站 点 中 information 文件 夹 中 的 
contentphp， 其 他 设 定 如 图 25-55 所 示 。 

四 EY 单 击 【 确 定 】 按 钮 回 到 编辑 页 面 ， 当 记录 集 超过 一 页 ， 就 必须 要 有 【上 一 
页 】、【 下 一 页 】 等 按钮 或 文字 ， 让 访问 者 可 以 实现 翻 页 的 功能 。 在 【服务 器 行 
为 】 面 板 中 单 击 郧 按钮， 在 弹出 的 菜单 中 选择 【记录 集 分 页 】 一 【 移 至 第 一 页 】 命 
令 ， 添 加 【第 一 页 】 选 项 ， 如 图 25-56 所 示 。 
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inf id 加 移 至 前 一 页 
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Go To Detail Page Move To Specific Record 
Go To Related page 
25-55 ”Go To Detail Page 对 话 框 25-56 ”选择 【 移 至 第 一 页 】 命 令 
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使 用 同样 的 方法 添加 其 他 记录 集 分 页 信息 ， 如 图 25-57 所 示 。 








Rel ing_tine} 
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25-57 ”添加 其 他 分 页 信息 


EC 在 【服务 器 行为 】 面 板 中 单 击 漠 按钮 ， 在 弹出 的 菜单 中 选择 【显示 记录 计数 】 
一 【显示 起 始 记 录 编 号 】 命 令 ， 如 图 25-58 所 示 。 

ECEQD) 打开 【显示 起 始 记录 编号 】 对 话 框 ， 单 击 【记录 集 】 右 侧 的 下 拉 按 钮 ， 在 弹出 
的 下 拉 列 表 中 选择 Rel 记录 集 ， 如 图 25-59 所 示 。 


芍 洪 洋 丰 洁 山 如 市 泪 导 一 一 宣 六 沽 则 路 区 ”二 92 中 
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Go To Detail Page 





图 25-58 选择 【显示 起 始 记录 编号 】 命 令 图 25-59 选择 Re1 记录 集 
本 于 BY 单 击 【确定 】 按 钮 ， 在 网 页 中 添加 记录 编号 信息 ， 如 图 25-60 所 示 。 
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图 25-60 ”添加 记录 编号 信息 
使 用 相同 的 方法 添加 其 他 记录 编号 与 记录 数 ， 如 图 25-61 所 示 。 














25-61 添加 其 他 记录 编号 与 记录 数 


25.3.2 ”搜索 主题 功能 的 设计 
index php 这 个 页 面 需要 加 入 【查询 】 功 能 ， 这 样 信息 资讯 管理 系统 才 不 会 因 日 后 数据 太 


se 
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多 而 有 不 易 访问 的 情形 发 生 。 具 体操 作 步 又 如 下 。 
EEC 在 index.php 页 面 中 ， 将 光标 放置 在 左 侧 页 面 表格 中 的 第 4 行 ， 然 后 选择 【 插 
入 】 一 【表单 】 一 【表单 】 命 令 ， 在 该 单元 格 中 插入 一 个 表单 ， 如 图 25-62 所 示 。 
EEJRDy 在 表单 中 输入 文字 【健康 查询 】， 然 后 选择 【插入 】 一 【表单 】 一 【文本 域 】 
命令 ， 插 入 一 个 文本 框 ， 如 图 25-63 所 示 。 








{Reeordset1. type_name} 











: 健康 搜索 


图 25-62 插入 表单 图 25-63 插入 文本 框 
ECDIS 在 【属性 】 面 板 中 设置 文本 域 的 属性 ， 如 图 25-64 所 示 。 


字符 敲 度 m 5 | 类 型 可 单行 6) ”站 多 行 站 灾 码 中) 
最 多 字符 数 初始 值 0) | 

口 昔 用 O) 

口 S 次 四 








图 25-64 【属性 】 面 板 


EC 将 光标 放置 在 文本 域 的 右 侧 ， 选 择 【 插 入 】 一 【 表 
单 】 一 【按钮 】 命 令 ， 插 入 一 个 按钮 ， 在 【属性 】 面 板 
中 设置 按钮 的 名 称 为 【查询 】， 并 选中 【提交 表单 】 单 
选 按钮 ， 如 图 25-65 所 示 。 








J 摘 得 名 值 ) 可 向。 | 。 动作 问 提 交 表单 6) 吓 无 类 加 无 ~ 


ee | 避 重 设 表单 四 





25-65 ”插入 按钮 并 设置 属性 


莉 于 BY 在 此 要 将 之 前 建立 的 记录 集 Rel 做 一 下 更 改 ， 打 开 【 记 录 集 】 对 话 框 ， 并 进入 
【高 级 】 设 置 ， 在 原 有 的 SQL 语法 中 ， 加 入 一 段 查询 功能 的 语法 : 


WHERE inf title like '%''.$keyword. ''%" 


那么 以 前 的 SQL 语句 将 变 成 如 图 25-66 所 示 。 
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25-66 ”修改 SQL 语句 
pr 其 中 like 是 模糊 查询 的 运算 值 ，% 表 示 任意 字符 ， 而 keyword 是 个 变量 ， 分 别 代 


SN。 表 关键 词 。 
EGG) 切换 到 【代码 】 视 图 ， 找 到 Rel 记录 集 相应 的 代码 并 加 入 如 下 代码 ;: 


$keyword=$_POST[keyword]; 
// 定 义 keyword 为 表单 中 "keyword™ 的 请 求 变量 


如 图 25-67 所 示 ， 完 成 设置 。 


二 一 一 
二 Cwamp\wwwnews\index php XHTMD) 本 这 


TES infornation php 


a 
加 1 《?php require_once( ../Connections/information php ) ; ?> | 
2 《<?php 












入 了 十 unction_ exists( Get Valuestring { 

3 function GetSQLYalueString ($theYalue, $theType, $theDefinedYalue 
巷 = "”, $theNotDefinedYalue = °” 
-A 


证 (PHP_VERSION < 6) { 

|! StheValue = get_magic_quotes_gpc() ? stripslashes($theValue) 
$theValue; 

0 1} v 

















图 25-67 加 入 代码 


EC 以 上 的 设置 完成 后 ，index.php 系统 主页 面 就 有 查询 功能 了 ， 可 以 按 F12 键 ， 在 
浏览 器 中 测试 一 下 是 否 能 正确 地 查询 。 首 先 index.php 页 面 会 显示 所 有 网 站 中 的 信息 
分 类 主题 和 最 新 信息 标题 ， 如 图 25-68 所 示 。 

EEJe 在 【健康 查询 】 文 本 框 中 输入 【秋季 】 并 单 击 【 查 询 】 按 钮 ， 结 果 会 发 现 页 面 
中 的 记录 只 显示 有 关 秋 季 所 发 表 的 最 新 信息 主题 ， 这 样 查询 功能 就 已 经 完成 了 ， 最 
终 的 效果 如 图 25-69 所 示 。 
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图 25-68 主页 面 浏览 效果 
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图 25-69 测试 查询 效果 


25.3.3 ”信息 分 类 页 面 的 设计 


信息 分 类 页 面 type.php 用 于 显示 每 个 信息 分 类 的 页 面 。 当 访问 者 单 击 index.php 页 面 中 的 
任何 一 个 信息 分 类 标题 时 就 会 打开 相应 的 信息 分 类 页 面 。 

具体 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 ， 选 择 【 页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 输 入 网 页 标题 【信息 分 类 】， 如 
图 25-70 所 示 。 选 择 【 文 件 】 一 【保存 】 命 令 ， 在 站 点 information 文件 夹 中 将 该 文 
档 保 存 为 type.php。 








25-70 ”添加 网 页 标题 


售 572 


EECR29 信息 分 类 页 面 和 首页 面 中 的 静态 页 面 设计 差不多 。 另 外 ， 信 息 分 类 页 面 左 侧 的 
【养生 分 类 】 模 块 和 首页 的 【养生 分 类 】 模 块 一 样 ， 这 里 不 再 獒 述 ， 如 图 25-71 所 示 。 


全 好 中 出 及 鄂 EN 


Be ee Mie, SEH | 

















图 25-71 养生 分 类 页 面 


EERBp typephp 这 个 页 面 主要 是 显示 所 有 信息 分 类 标题 的 数据 ， 所 使 用 的 数据 表 是 
information， 单 击 【 绑 定 】 面 板 中 的 【增加 】 标 签 上 的 出 按钮 ， 在 弹出 的 菜单 中 选 
择 【 记 录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 输入 如 表 25-7 的 数据 ， 再 
单 击 【 确 定 】 按 钮 就 完成 设 定 了 ， 如 图 25-72 所 示 。 


表 25-7 输入 “记录 集 ” 
| 设置 人 | 属性 | 


Recordsetl 列 












































25-72 【记录 集 】 对 话 框 
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EC 单 击 【确定 】 按 钮 ， 完 成 记录 集 绑 定 。 将 光 
标定 位 在 表格 第 2 行 ， 然 后 选择 【插入 】 一 【 表 
格 】 命 令 ， 打开 【表格 】 对 话 框 ， 在 其 中 设置 表 
格 的 相关 参数 ， 如 图 25-73 所 示 。 

四 于 BY 单 击 【 确 定 】 按 钮 ， 在 表格 中 插入 一 个 2 行 
2 列 的 表格 ， 并 设置 表格 的 对 齐 方式 为 居中 对 
齐 ， 如 图 25-74 所 示 。 

合并 第 1 行 ， 将 记录 集 的 字段 插入 至 
type.php 网 页 中 的 适当 位 置 ， 如 图 25-75 所 示 。 

为 了 显示 所 有 记录 ， 需 要 选择 【服务 器 行 

为 】 中 的 【重复 区 域 】 命 令 ， 单 击 type.php 页 面 

中 需要 重复 的 表格 ， 如 图 25-76 所 示 。 









































25-74 ”插入 表格 
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HRecordsetl inf_title} 





图 25-76 选择 要 重复 显示 的 表格 
ECESRD) 单 击 【应 用 程序 】 面 板 组 中 的 【服务 

















器 行为 】 面 板 上 的 国 按 钮 ， 在 弹出 的 菜 em 
单 中 选择 【重复 区 域 】 命 令 ， 打 开 【 重 复 | 9 
区 域 】 对 话 框 ， 设 定 一 页 显示 的 数据 为 a -一 


10 条 ， 如 图 25-77 所 示 。 

EECJD) 单 击 【确定 】 按 钮 ， 回 到 编辑 页 面 ， 
会 发 现 先前 所 选取 要 重复 的 区 域 左上 角 出 图 25-77 【重复 区 域 】 对 话 框 
现 了 一 个 【重复 】 灰 色 标签 ， 这 表示 已 经 
完成 设置 ， 如 图 25-78 所 示 。 

EY 在 【服务 器 行为 】 面 板 中 单 击 四 按钮 ， 在 弹出 的 菜单 中 选择 【记录 集 分 页 】 一 
【 移 至 第 一 页 】 命 令 ， 添 加 【第 一 页 】 选 项 ， 使 用 同样 的 方法 添加 其 他 记录 集 分 页 
信息 ， 如 图 25-79 所 示 。 
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25-78 添加 重复 区 域 的 效果 


























图 25-79 添加 记录 集 分 页 信息 
EEDD 在 【服务 器 行为 】 面 板 中 ， 单 击 鳃 按钮 ， 在 弹出 的 菜单 中 选择 【显示 记录 计 
数 】 一 【显示 起 始 记 录 编 号 】 命 令 ， 打 开 【 显 示 起 始 记 录 编 号 】 对 话 框 ， 单 击 【 记 
录 集 】 右 侧 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 Recordsetl 记录 集 ， 如 图 25-80 
所 示 。 


中 沙 彤 唆 汉 内 如 刘坤 忆 一 一 齐 冰 于 忆 孙 辩 ” 才 92 洲 音 

















时 示 起 和 3 录 将 x 

记录 集 : [Boordsoti E 
取消 

一 一 





图 25-80 选择 Recordset1 记录 集 
EEY 单 击 【确定 】 按 钮 ， 在 网 页 中 添加 记录 编号 信息 ， 如 图 25-81 所 示 。 


ET 司 
[Recordsetl. inf_title} 















归 邓 {Recordsetl FirstRacaral 到 (总 





图 25-81 添加 记录 编号 信息 
使 用 相同 的 方法 添加 其 他 记录 编号 与 记录 数 ， 如 图 25-82 所 示 。 


国志 
{Recordsetl 




















3 记录 thecordsetl :和 到 


25-82 ”添加 其 他 记录 编号 与 记录 数 


EC 选取 编辑 页 面 中 的 信息 标题 字段 inf title， 再 单 击 【 应 用 程序 】 面 板 组 中 的 【 服 
务 器 行为 】 面 板 上 的 国 按 钮 ， 在 弹出 的 菜单 中 选择 Go To Detail Page 命令 ， 在 打开 
的 Go To Detail Page 对 话 框 中 单 击 【浏览 】 按 钮 ， 打 开 【 选 择 文件 】 对 话 框 ， 选 择 


. 
ss5®@ 
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information 文件 夹 中 的 contentphp，【 传 递 URL 参数 】 设 为 inf id， 其 他 参数 设 定 
如 图 25-83 所 示 。 最 后 单 击 【 确 定 】 按 钮 即 可 完成 设置 。 


Go To Detail page 





谤 挤 -| rphp eobe $row orwedsati[ :| 


[| 
详细 信息 页 . |content. php 测 
传递 URL 参数 :inf id 














设置 为 以 FJ 的 值 Nm 
记录 集 : Recordsetl 





列 : inEid 
传递 现 有 多 数 : 口 URL 参 笋 


口 来 单 参 数 











25-83 ”Go To Detail Page 对 话 框 


EE 芭 DB 加 入 显示 区 域 的 设 定 。 首 先 选取 记录 集 有 数据 时 要 显示 的 数据 表格 ， 这 里 单 击 
选择 需要 显示 的 整个 表格 ， 如 图 25-84 所 示 。 








果 主 合 此 订 件 由 号 示 
可 内 上 


ordsetl., FirstRe 


图 25-84 ”选择 要 显示 的 记录 


EEC) 单 击 【应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 网 按 钮 ， 在 弹出 的 菜单 


中 ， 选 择 【 显 示 区 域 】 一 【如 果 记 录 集 不 为 空 则 显示 】 命 令 ， 打 开 【 如 果 记 录 集 不 
为 空 则 显示 】 对 话 框 ， 将 【记录 集 】 设 置 为 Recordsetl， 如 图 25-85 所 示 。 





如 果 记 录 集 不 为 空 则 显示 x 
记录 集 : [Recordsetl 可 We | 
取消 
才 助 





图 25-85 【如 果 记 录 和 集 不 为 空 则 显示 】 对 话 框 
EC 单 击 【确定 】 按 钮 回 到 编辑 页 面 ， 会 发 现 先前 所 选取 要 显示 的 区 域 左 上 和 角 出 
现 了 一 个 【如 果 符 合 此 重复 则 显示 】 灰 色 标 签 ， 这 表示 已 经 完成 设置 ， 如 图 25-86 
所 示 。 





25-86 ”记录 集 不 为 空 则 显示 


信 576 


EC 选取 记录 集 没有 数据 时 要 显示 的 文字 信息 ， 如 图 25-87 所 示 。 

ED 单 击 【应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 国 按 钮 ， 在 弹出 的 菜单 
中 ， 选 择 【 显 示 区 域 】 一 【如 果 记 录 集 为 空 则 显示 】 命 令 ， 打 开 【 如 果 记 录 集 为 空 
则 显示 】 对 话 框 ， 将 【记录 集 】 设 置 为 Recordsetl ， 如 图 25-88 所 示 。 


如 果 记 录 集 为 空 则 显示 x 





记录 集 : Recordsetl ~| 





| 








图 25-87 选择 没有 数据 时 显示 的 信息 图 25-88 【如 果 记录 集 为 空 则 显示 】 对 话 杠 

EPZ 单 击 【确定 】 按 钮 回 到 编辑 页 面 ， 会 发 现 先前 所 选取 要 显示 的 区 域 左上 角 出 现 
了 一 个 【如 果 符合 此 条 件 则 显示 】 灰 色 标 签 ， 这 表示 已 经 完成 设置 ， 效 果 如 图 25-89 
所 示 。 


如 果 行 合 宣 县 对 示 
(Recordsetl, inf_title} 


营 沙 月 下 尖 碟 部 齐 直 书 一 一 2 全 新 泗 央 蕉 其 坤 Sz 小 图 

















{Recordsetl. FirstRecord} : 
ee 
{Recordsetl. TotulReeords} : 

















图 25-89 ”记录 集 为 空 则 显示 
至 此 ， 信 息 分 类 页 面 type.php 的 制作 已 经 完成 ， 预 览 效果 如 图 25-90 所 示 。 


“ TIDwAEY 





养生 分 类 

2 

和 ME| 

和 

- 金秋 天 气 页 , 军 记 养生 歌 
可 三 


于 


让 好 1 到 4 区 生 四 





EE 


= 

去 全 备 失 

Se Ee soRe 到 让 大 Fe#4A Arms PS Seasas FA 23Em4E ean NEF 
Snes Ean QR easEn OE Femmere ea 1252N Fen MRE XEies Farllt We 
HR Corsi 


25-90 ”信息 分 类 页 面 效 果 


和 
sm7® 
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25.3.4 ”信息 内 容 页 面 的 设计 


信息 内 容 页 面 contentphp 用 于 显示 每 一 条 信息 的 详细 内 容 。 这 个 页 面 设计 的 重点 在 于 如 
何 接收 主页 面 index.php 和 type.php 所 传递 过 来 的 参数 ， 并 根据 这 些 参数 显示 数据 库 中 相应 的 
数据 。 


具体 操作 步骤 如 下 。 

EEIDp 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 ， 在 【页 面 类 型 】 下 拉 列 表 框 中 选择 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 选 择 【 文 件 】 一 【保存 】 命 令 ， 
在 站 点 中 information 文件 夹 中 将 该 文档 保存 为 content.php。 

EEIPy% 信息 内 容 页 面 设计 和 前 面 的 页 面 设计 差不多 ， 在 这 里 不 做 详细 的 页 面 制作 说 
明 ， 效 果 如 图 25-91 所 示 。 








js 

右 情 链接 
要 要 他 席 。 攻 美人 时 。 作 巡 生活 。 正和 4 网。 同上 
多 记 姓 广 。 问答 网。 健 素 120 网 。 名 状 生 言 隔 。 心 租 所 
天 生生 各。 广州 卫 革 。 全 来 全 阳 。 全 来 和 小 只 


由 曾 # 钼 
= 用 。 六 所 网 江 生 。 作文 网 。 全 国 世 浪人 。 如 色 负 品 。 荐 外相 只 
2 机 网 。 养生 同 。 内 上 本 下 。 才 站 和 和 。 天 六 去 114 。 栈 厅 








25-91 ”信息 内 容 页 面 设计 效果 


[ETBY 单 击 【 绑 定 】 面 板 中 的 【增加 】 标 签 上 的 国 按 钮 ， 在 弹出 的 菜单 中 选择 【记录 
集 ( 查 询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 输入 如 表 25-8 所 示 的 数据 ， 再 单 击 
【确定 】 按 钮 就 完成 设 定 了 ， 对 话 框 的 设置 如 图 25-92 所 示 。 


表 25-8 记录 集 的 表格 设置 






设置 值 








| Recordsetl 





售 5rs 






























































































































人 中 

第 上 
EEC 将 光标 定位 在 第 2 行 第 2 列 ， 选 择 【 插 入 】 一 【表格 】 命 令 ， 打开 【 表 格 】 对 名 
话 框 ， 在 其 中 设置 表格 的 参数 ， 如 图 25-93 所 示 。 司 
RE x 综 
雪 相 大 应 | 
行 数 - 3 列 |1 用 
记录 入 x 表格 宽度 :85 ] | 百分比 案 
边 相 可 细 : 0” | 人 末 例 
BRecordsotl | 加 | 单元 格 边 滤 0 ”| 图 中 
连接: East 司 [ 训 & | | 单元 格 间距 :0 ”| 加 | 
表格 - [informatien 司 MR 标题 开 
列 @ a 口才 站 的 一 -一 围 力 本 从 
ie 天 在 两 者 息 
辅助 功能 资 
标题 讯 
摘要 : 管 
理 
和 

| 一 取消 | 
图 25-92 【记录 集 】 对 话 框 图 25-93 【表格 】 对 话 框 


EEID 单 击 【确定 】 按 钮 ， 在 网 页 中 插入 一 个 3 行 1 列 的 表格 ， 然 后 选择 【插入 】 一 
【图 像 】 命 令 ， 在 表格 的 第 2 行 插入 一 张 图 片 linejpg， 如 图 25-94 所 示 。 








图 25-94 插入 图 片 inejpg 


EEC 绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 contentphp 页 面 中 的 适当 位 置 ， 完 成 信 
息 内 容 页 面 content.php 的 制作 ， 如 图 25-95 所 示 。 


{Recordsetl. inf_title} 





25-95 ” 绑 定 记录 集 到 页 面 中 


EC 绑 定数 据 到 页 面 后 ， 设 置信 息 标 题 和 信息 内 容 的 样式 ， 这 样 更 加 美观 。 选 择 信 
息 标题 字段 ， 在 【属性 】 面 板 的 CSS 样式 表 中 ， 设 置 【 大 小 】 为 14px， 字 体 颜 色 为 
#000， 字 体 加 粗 ， 设 置 目标 规则 的 名 称 为 .ttle， 如 图 25-96 所 示 。 



























































尾 性 

<> mE 目标 规则 | . title ~v| | 字体 (0) [局 默认 字体 ~ ~v]toa ~| 硅 芒 | 对 村 
怒 css [cs vei] | 大 he | | 

号 | 和 水 平 亿 ) 点 认 ”~ | 宽 @) |] 不 换行 o) 口 、 背 景 头 色 (6) 三 :| ] 页 面 属性 
一 二 站 各) 由 ( ~ 高 从 | 4 本 题名 口 








25-96 新建 CSS 样式 


和 
579 傅 
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ESRB 用 同样 的 方法 设置 信息 内 容 的 样式 ， 这 样 信息 内 容 页 面 即 完成 制作 ， 预 览 效果 
如 图 25-97 所 示 。 










健康 养生 


wwwjkjan com 


养生 分 类 牛 关 不 能 让 这 蝎 3 喝 牛奶 有 五 个 误区 








图 25-97 内容 信息 页 面 预览 效果 


25.3.5 ”系统 页 面 的 测试 


制作 好 一 个 系统 后 ， 需 要 测试 无 误 ， 才 能 上 传 到 服务 器 以 供 使 用 。 下 面 介绍 系统 页 面 测 


试 的 具体 操作 步骤 。 
ES 打开 正 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 页 


面 ， 如 图 25-98 所 示 。 


wm TT we Py 







Bs 。 人 郡 女 + 志 上 凡 阁 。 生活 天 
5 菲 生 奥 t+ 可 中 于 。 保健 全 






打上 守 人 苦 ， 从 兴 到 且 放 和 信号 他 休 








计生 上 和 庆 综 上 革 果 他? 寻访 二 后 JN 开始 
st 了 守 胡 、 加 和 村 
健康 搜索 4 可 放空 虹 蝇 1 蝎 和 奶 五 人 谍 ， 
上 入 这 训 方 天 ee 
人 地 EE] Em 如 下 自己 -6 和 
ME 再 过 5 芝 作 他 基 
半生 六 到 关 兴 热 文 排行 
SE Hk EF 人 
8 
二 加 = 入 避风 类 3 
sx 
人 目 人 
a CE 
从 过 后 关 加 下。 zt 站 PE 
下 个 和 页 避 ! 到 人 0 名 二 





图 25-98 打开 index.php 页 面 
ECEDy 单 击 页 面 左 侧 的 信息 分 类 模块 下 的 链接 ， 如 这 里 单 击 【养生 之 道 】 超 链接 ， 即 


使 580 





可 在 右 侧 的 页 面 中 显示 有 关 养 生 之 道 的 信息 ， 如 图 25-99 所 示 。 


全 各 
pi 


办 三 种 风 品 和 帮 纪 和 
各 天 证 苦 过 5 代 玉 交 










健康 养生 


wwwjkjan com 


养生 分 类 





下 二 JP HK 当时 


这 1 到 4 拘 震 由 


芍 油 崩 丰 洁 凯 名 亦 尖 书 一 一 2 齐 业 于 司 孙 癌 ” 几 9z 小 章 


二 te 





于 他 麻吉 而 。 甘 呈 公 主公 这 。 下 人 和 网 。 网上 硬 瑟 关外 用 呈 。 闻 5 方 网 8 浊 时 。 入 网 。 他国 三 FE 于 二。 如 食品 。 对 MH 胆 男 
砚台 并 。 辣 网。 人 2120 网 。 全 和 要 百 列 。 作 病 。 素 所 本 佛寺 大 全 。 生 天 二 。 12W 忆 网 。 开光 。 网 H5 上 5 。 41 关中 时 天 E114 。 天 划 
天 和 人 建 。_ 广 儿科 地 康 全 网 。 包 巡 生 江 小 震 。 包 革 网 。 ?0COR 攻 区 


25-99 单 击 【 养 生 之 道 】 超 链接 


EC) 单 击 【饮食 养生 】 超 链接 ， 在 右 侧 的 页 面 中 则 显示 有 关 饮 食 养 生 的 信息 ， 如 
图 25-100 所 示 。 


nes TT PE 


养生 分 类 


状 生 之 消 
tom 村 
和 








和 生生 归 上 从 人 食疗 广 什 炎 阳 必 
如 T 民 空前? 加 和 妨 有 五 个 训 忆 
和 和 要 站 着 A 务 ， 人 如 放 芳 站 强身 健 人 

训 归 1 到 4 全 本 


总 
A 








友情 链接 
和 。 导 E 。 关 SR 。 保生 活 。 正信 天生 司 。 网 上 上 店 。 户外 凡 号 。 新 Fr 广 髓 澳 条 和 。 作文 同 。 之 国友 。 其 公安 时 。 站 记 
有 所 从 责问 和 网 。 江 120 网 。 多 具 生计 网。 人) 疮 疾 。 庆生 系 各 大 全 。 生活 网 。 12EB 况 秀和 网 同 HEE iF 和 天 E14 村 
关 生 保 哇 。 让 川 颖 洲 。 这 安全 辣 。 党 过 生活 小 估 交 。 庆 过 同 。 PCCOs 雪 社区 





图 25-100 单 击 【 饮 食 养生 】 超 链接 


EC 如 果 想 要 查看 分 类 信息 的 详细 内 容 ， 可 以 在 右 侧 的 分 类 信息 中 单 击 任意 一 个 标 
题 文章 ， 就 可 以 打开 该 标题 文章 的 详细 内 容 页 面 ， 如 图 25-101 所 示 。 这 就 说 明 信 息 
资讯 管理 系统 的 前 台 页 面 设计 完成 。 


和 
581 命 
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误区 一 ; 不 能 四 蚂 诬 区 二 : 高 半 态 补 配 净 果 更 村 译 区 三 : 过 局 去 长 驯 次 区 四 不 能 姑 果 汁 一 起 唱 梁 区 五 : 不 能 和 茶 一 起 加 


让 请 三 








户 着 用 品 。 半 和 方 网 才 浊 党 。 作文 网 。 全 国医 院 罪 毛病 色 身 品 。 郑州 国 记 
活 网 。 12 朋 记 网 。 养生 网 。 网上 本 店 。 北京 养生 党 。 天 汪 云 114 。 三 到 





图 25-101 详细 内 容 页 面 


25.4 ”后 台 管 理 页 面 设计 


信息 资讯 管理 系统 后 台 管 理 对 信息 资讯 管理 系统 来 说 非常 重要 。 管 理 者 可 以 通过 账号 与 
密码 进入 后 台 对 信息 分 类 和 信息 内 容 进行 增加 、 修 改 或 删除 ， 使 网 站 能 随时 保持 最 新 、 最 实 
时 的 信息 。 


25.4.1 后台 管 理 入 口 页 面 


后 台 管理 主页 面 必须 受到 权限 管理 ， 可 以 利用 登录 账号 与 密码 来 判别 是 否 由 此 用 户 来 实 
现 权 限 的 设置 管理 。 

具体 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 页 】 选 
项 卡 ， 在 【页 面 类 型 】 下 拉 列 表 框 中 选择 ASP VBScript 选项 ， 在 【布局 】 下 拉 列 表 
框 中 选择 【无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 输 入 网 页 标题 【后 台 管 
理 入 口 】， 选 择 【 文 件 】 一 【保存 】 命 令 ， 在 站 点 中 information 文件 夹 中 admin 文 
件 夹 中 将 该 文档 保存 为 admin_login.php。 

EEC 选择 【插入 】 一 【表单 】 一 【表单 】 命 令 ， 插 入 一 个 表单 。 

ECOSp 将 鼠标 放置 在 该 表单 中 ， 选 择 【 插 入 】 一 【表格 】 命 令 ， 打 开 【 表 格 】 对 话 
框 ， 在 【 行 数 】 文 本 框 中 输入 4， 在 【 列 】 文 本 框 中 输入 5， 在 【表格 宽度 】 文 本 框 
中 输入 400 像素 ， 其 他 选项 保持 默认 值 ， 如 图 25-102 所 示 。 

EEC 单 击 【 确 定 】 按 钮 ， 在 该 表单 中 插入 了 一 个 4 行 2 列 的 表格 ， 选 择 表 格 ， 在 
【 属性】 面板 中 ， 设 置 【 对 齐 】 为 【居中 对 齐 】。 拖 动 鼠标 选择 第 1 行 表格 所 有 单 













































































LD- 
pl 
元 格 ， 在 【属性 】 面 板 中 单 击 吕 按钮， 将 第 1 行 表 格 合并 ， 用 同样 的 方法 把 第 4 行 ”名 
表格 合并 ， 如 图 25-103 所 示 。 章 
素 格 x 结 
六 应 
! 插入 一 个 宽度 为 400 像 1 行政 区 列 丰 用 
! 素 , 4 行 2 列 的 表格 。，! 于 车 
| pe 1 边框 粗细 : |0 像 末 [4 
单元 格 边 距 : 0 辑 | 
单元 格 间 距 : |0 国 
标题 开 
四 二 和 
无 左 顶部 两 者 资 
辅助 功能 县 、 
Ee 
统 
[到 











图 25-103 设置 插入 的 表格 


莉 于 BY 在 表格 的 第 1 行 中 输入 文字 【信息 资讯 系统 后 台 管理 中 心 】， 在 表格 的 第 2 行 
第 1 个 单元 格 中 输入 文字 说 明 【 账 号 : 】,， 在 第 2 行 第 2 个 单元 格 中 选择 【插入 】 
一 【表单 】 一 【文本 域 】 命 令 ， 插 入 单行 文本 域 表单 对 象 ， 定 义 文本 域名 为 
usermame，【 类 型 】 设 为 【单行 】， 文 本 域 属 性 设置 及 效果 如 图 25-104 所 示 。 














加 文本 域 字符 宽度 mJ | 类 型 回 单行 6G) 。 口 多 行 中 DD 类 CC) 无 四 
[usernane ] 最 多 字符 数 初始 值 YI) 3 
口 禁 用 四) 
口 读 中 





25-104 ”输入 文字 和 插入 文本 域 


EECDgs 在 表格 第 3 行 第 1 个 单元 格 中 输入 文字 说 明 【 密 码 ，】， 在 表格 第 3 行 第 2 个 
单元 格 中 选择 【插入 】 一 【表单 】 一 【文本 域 】 命 令 ， 插 入 单行 文本 域 表单 对 象 ， 
插入 单行 文本 域 ， 定 义 文本 域名 为 password，【 类 型 】 设 为 【密码 】， 文 本 域 属性 
设置 及 效果 如 图 25-105 所 示 。 
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”信息 资讯 系统 后 各 管理 中心 


Ge 


字符 宽度 ) | 类 型 口音 行 6) ”中 多 行业 密 码 中) 类 中 无 ~ 
password | 最 多 字符 数 。 。 ”初始 值 0) | 9 

口 戎 中 

口 只 次 四 





























25-105 ”设置 密码 和 文本 域 


EEC 单 击 选择 表格 第 4 行 ， 依 次 选择 两 次 【插入 】 一 【表单 】 一 【按钮 】 命 令 , 插 
入 两 个 按钮 ， 并 分 别 在 【属性 】 面 板 中 进行 属性 变更 ， 一 个 为 登录 时 用 的 【提交 表 
单 】 选 项 ， 一 个 为 【 重 设 表单 】 选 项 ， 属 性 设置 及 效果 如 图 25-106 所 示 。 




















按 扭 名 称 类 CC) 无 


jbutton | 


动作 回 提交 表单 G) 中 无 吕 
司 宣 kh 思 















按钮 名 称 值 W) 重要 _ 动作 站 提交 表单 G) 站 无 中 类 CC) 无 


回 — i 加 重 设 表 单 @) 











图 25-106 设置 按钮 


ECEDRB) 选择 网 页 中 的 整个 表格 ， 然 后 在 【属性 】 面 板 中 设置 表格 的 对 齐 方式 为 【居中 
对 齐 】， 边 框 的 大 小 为 2， 具体 的 参数 设置 如 图 25-107 所 示 。 











行凶 4 | 宽 D) oo | 对 齐 扩 ) | 居中 对 齐 ~ 





























到 C2 | 边框 2 | 
吕 图 原始 档 全 7 | 








25-107 ”设置 表格 属性 


EC) 选择 表格 中 的 文字 ， 然 后 在 【属性 】 面 板 中 的 CSS 设置 界面 中 设置 文字 大 小 为 
16， 表 格 的 背景 颜色 为 #66CCFF， 如 图 25-108 所 示 。 

EY 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 好 按 钮 ， 在 弹出 的 菜单 
中 选择 【用 户 身份 验证 】 一 【登录 用 户 】 命 令 ， 打 开 【 登 录用 户 】 对 话 框 ， 设 置 如 
果 不 成 功 将 返回 登录 页 面 admin login.php 重新 登录 ; 如 果 成 功 将 登录 后 台 管 理 主页 


面 adtminphp， 如 图 25-109 所 示 。 





《> ini 目标 规则 #torl table tr ta。 ~ | 字体 加 时 认 字体 -lB 了 主要 本 本 


























[Bcss] 编 加 规则 |[ Cs5 画板 P) ] 大 小 S) ls 。 > [px zj 站 | 
中 | 单元 格 。 水 平 CD) 居中 对 齐 >] 宽 o | 不 换行 中) 门 、 背景 才 色 (6) [Es seeccrr | 页 面 属 性 


一 总 头 可 直 中 [黑人 人 了 ] 高 加 26 标题 四 门 
































25-108 设置 文字 样式 


ECEDD) 选择 【窗口 】--【 行 为 】 命 令 ， 打 开 【 行 为 】 面 板 ， 单 击 【 行 为 】 面 板 中 的 图 
按钮 ， 在 弹出 的 菜单 中 选择 【检查 表单 】 命 令 ， 打 开 【 检 查 表 单 】 对 话 框 ， 设 置 
username 和 password 文本 域 的 【 值 】 都 为 【必需 的 】，【 可 接受 】 为 【任何 东 
西 】， 如 图 25-110 所 示 。 








中 消光 雄 汉 内 如 刘坤 忆 一 一 Z 齐 半 于 刁 孙 装 ” 贡 92 洲 音 


. | 
py A 









































如 果 登 录 成 功 ， 转 到 | [DB 
口 转 到 前 一 个 URLG0 果 它 存在 ) 值 : 回 必需 的 
如 果 登 录 失 败 ， 转 到 :|*dnin_legin_ php [DB 
访问: 国 
基于 以 下 项 限制 访问 : 轩 用 户 名 和 密码 可 接受 ，@ 任何 东西 口 数 守 


口 用 户 各、 密码 和 访问 如 别 











口 电子 邮件 地 址 〇 到 从 [  ] 到 [ ] 

















革职 级 别 自 ， usernane 3 
图 25-109 登录 用 户 的 设置 图 25-110 【检查 表单 】 对 话 框 
EECIP)% 单 击 【 确 定 】 按 钮 ， 回 到 编辑 页 
面 ， 完 成 后 台 管 理 入 口 页 面 
admin_login php 的 设计 与 制作 。 预 览 一 一 一 
效果 如 图 25-111 所 示 。 | 登录 || 重 吐 | 
25.4.2 “后台 管理 主页 面 图 25-111 后 台 登 录 界面 效果 


后 台 管 理 主页 面 是 管理 者 在 登录 页 面 验证 成 功 后 所 进入 的 页 面 。 这 个 页 面 可 以 实现 对 信 
息 分 类 和 信息 内 容 的 新 增 、 修 改 或 碘 除 ， 使 网 站 能 随时 保持 最 新 、 最 实时 的 信息 。 
具体 操作 步骤 如 下 。 
EE 打开 admin php 页 面 (此 页 面 设计 比较 简单 ， 页 面 设计 在 这 里 不 做 说 明 )， 单 击 
【 绑 定 】 面 板 上 的 留 按钮 ， 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 【记录 
集 】 对 话 框 中 ， 输 入 如 表 25-9 所 示 的 数据 ， 再 单 击 【 确 定 】 按 钮 即 完成 设 定 ， 设 置 
如 图 25-112 所 示 。 
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表 25-9 “记录 集 ” 的 表格 设置 让 
3 
属 性 设置 值 | 
| 测 二 
名 称 Re [有 
连接 | information CC |] 
表格 information 
列 全 部 
名 先 | 无 
排序 以 inf id 降序 
EI 单 击 【确定 】 按 钮 。 完 成 记录 集 图 25-112 【记录 集 】 对 话 框 





Re 的 绑 定 ， 绑 定 记录 集 后 ， 将 Re 记 

















图 25-113 ”将 记录 集 的 字段 插入 至 admin.php 网 页 中 


EECJSp 在 这 里 要 显示 的 不 单 是 一 条 信息 记录 ， 而 是 多 条 信息 记录 ， 所 以 要 加 入 【重复 
区 域 】 命 令 ， 再 选择 需要 重复 的 表格 的 一 行 ， 如 图 25-114 所 示 。 








{Re. inf_title} 


图 25-114 ”选择 重复 的 区 域 
EEC 单 击 【应 用 程序 】 面 板 组 中 的 








【服务 器 行为 】 面 板 上 的 图 按钮 ， 下 
在 弹出 的 菜单 中 选择 【重复 区 域 ] 命 。 | za 区 了 十 一 一 
令 ， 打 开 【 重 复 区 域 】 对 话 框 ， 设 定 mk 四] 课 二 
一 页 显示 的 数据 为 10 条 记录 ， 如 i 


图 25-115 所 示 。 

E> 单 击 【 确定】 按钮 回 到 编辑 页 
面 ， 会 发 现 先前 所 选取 要 重复 的 区 域 图 25-115 【重复 区 域 】 对 话 框 
左上 角 出 现 了 一 个 【重复 】 灰 色 标 
签 ， 这 表示 已 经 完成 设 定 了 ， 如 图 25-116 所 示 。 





Te Te re 





和 至 走 






{Re. inf_title} [修改 ] [删除 ] 





图 25-116 添加 重复 区 域 的 效果 


EEC 当 显 示 的 信息 数据 大 于 10 条 ， 就 必须 加 入 记录 集 分 页 功能 了 。 在 【服务 器 行 
为 】 面 板 中 单 击 出 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 分 页 】 一 【 移 至 第 一 


ss6 


页 】 命 令 ， 添 加 【第 一 页 】 选 项 ， 如 图 25-117 
所 示 。 

EEC 使 用 同样 的 方法 添加 其 他 记录 集 分 页 
信息 ， 如 图 25-118 所 示 。 

EEC admin.php 是 提供 管理 者 链接 至 信息 编 
辑 的 页 面 ， 然 后 进行 新 增 、 修 改 与 删除 等 
ia 4 个 链接 ， 各 链接 的 设置 如 图 25-117 选择 【 移 至 第 一 页 】 命 令 








[修改 ] [删除 ] 














营 沙 崩 丰 尖 凯 如 齐 站 书 一 一 2 章 兰 洒 司 孙 总 ” 才 9Z 小 多 


图 25-118 添加 记录 集 分 页 信息 


表 25-10 admin.php 页 面 的 表格 设置 
i 设置 值 
连接 页 面 inf upd.php 
一 一 一 一 


inf add.php 
Em 其 中 “标题 字段 {re_inf title}”“ 修 改 ” 及 “删除 ”的 链接 必须 要 传递 参数 inf id 
SS ”给 转 到 的 页 面 ， 这 样 转 到 的 页 面 才能 够 根据 参数 值 而 从 数据 库 将 某 一 笔 数 据 筛选 出 来 
再 进行 编辑 。 
EEJRD 首先 选取 【添加 信息 资讯 】， 选 择 【 插 入 】 面 板 中 【常用 】 下 的 【超级 链 
接 】， 打 开 超 级 链接 对 话 框 ， 将 它 链接 到 admin 文件 夹 中 的 information_ add.php 页 
面 ， 如 图 25-119 所 示 。 
EEC 在 右边 栏 中 添加 【修改 】 和 【删除 】 文 字 ， 并 选取 【修改 】 文 字 ， 然 后 单 击 
【应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 上 出 按钮， 在 弹出 的 菜单 中 ， 选 择 
Go To Detail Page 命令 ， 打 开 Go To Detail Page 对 话 框 ， 单 击 【 浏 览 】 按 钮 打开 【 选 
择 文件 】 对 话 框 ， 选 择 admin 文件 夹 中 的 information_ upd.php， 其 他 设置 为 默认 
值 ， 如 图 25-120 所 示 。 











Go To Detai Page 



























































Hyperlink 
六 本 甘 玉 于 可 i | [EE 
机 接 : infornation_add. php v] 国 取消 人 递 URLS 数 -Faeida ”| 以 要 为 以 Ti8 蛤 [mE .| 
目标 : |-blank ~ 帮助 | 
标题 : 添加 信息 | 了 EGG 
访 a 久 :| | 传递 观 有 参数 : 口 URL 专政 
Tab 键 索引 - 口才 单 多 数 
图 25-119 ”超级 链接 对 话 框 25-120 ”设置 【修改 】 转 向 的 详细 页 面 


和 
587 命 
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E> 选取 【删除 】 文 字 并 重复 上 面 的 操作 ， 要 转 到 的 页 面 改 为 infomation_deLphp， 
如 图 25-121 所 示 。 

选取 标题 字段 (Reinf title} 并 重复 上 面 的 操作 ， 要 转 到 的 详细 页 面 改 为 
content.php， 如 图 25-122 所 示 。 









































Go To Detail Page 让 
Go Te Detail Page x 
榜 接 “<?php echo $row Re[ inf titl v 
上 一 一 ontent.Php | CR | 
二 传递 URL 雪 到 nf-9 | 设置 为 以 下 项 的 信 CC |] 
记录 集 如 可 
殊 [ine id ~ 
传阅 现 有 关 堵 - 口 URL 才 好 传递 现 有 参数 : 口 URL 考 至 
口 才 音 外 口才 单数 
人 
25-121 设置 【删除 】 转 向 的 详细 页 面 图 25-122 设置 {Re.inf_title} 转 向 的 详细 页 面 


EE> 单 击 【 确 定 】 按 钮 ， 完 成 转 到 详细 页 面 的 设置 ， 到 这 里 已 经 完成 了 信息 内 容 的 
编辑 。 现 在 来 设置 信息 分 类 ， 单 击 【 绑 定 】 面 板 上 的 叱 按钮 ， 在 弹出 的 菜单 中 选择 
【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 ， 输 入 设 定 值 如 表 25-11 所 示 
的 数据 ， 再 单 击 【确定 】 按 钮 即 完成 设置 ， 如 图 25-123 所 示 。 


表 25-11 记录 集 表格 的 设置 


| 设置 值 | 属性 | 


| amaim | 地 志 
| intomation ype |v 
EGG 单 击 【 确定】 按钮。 完成 记录 集 Rel 的 绑 定 ， 绑 定 记录 集 后 ， 将 Rel 记录 集中 


的 type_name 字段 插入 至 admin.php 网 页 中 的 适当 位 置 ， 然 后 在 字段 的 后 面 输入 【 修 
改 】 和 【删除 】 文 字 信 息 ， 如 图 25-124 所 示 。 












































记录 集 x 
fr el -一 | 
这 扩 J 一 管理 员 你 好 ! 请 你 添加 信息 资讯 
表格 :information_type ~ i ee 
列 ee 口 渤 定 的 : 而 而 
type_nane ert 
管理 员 你 好 ! 请 你 管理 信息 分 类 ! 
节选 元 ~ 加 . 
WRL 者 数 
排序 : 无 ~v HR 
信 el. type_name} [修改 ] [ 晤 除 ] 
25-123 【记录 集 】 对 话 框 图 25-124 将 字段 插入 至 admin.php 网 页 中 


5s 


EED) 在 这 里 要 显示 的 不 单 是 一 条 信息 分 类 记录 ， 而 是 全 部 的 信息 分 类 记录 ， 所 以 要 
加 入 【服务 器 行为 】 面 板 中 的 【重复 区 域 】 命 令 ， 再 选择 需要 重复 的 表格 ， 如 图 25-125 
所 示 。 

ED 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 节 按 钮 ， 在 弹出 的 菜单 
中 选择 【重复 区 域 】 命 令 ， 打 开 【 重 复 区 域 】 对 话 框 ， 设 定 一 页 显示 的 数据 为 【所 
有 记录 】， 如 图 25-126 所 示 。 








重复 区 域 x 
记录 集 、 Rel ~ [| 
示 O 加 | 记录 | 
_， 显示 : 刘 
@ 所 有 记录 
{Rel. type_name} [修改 ] [ 喇 除 ] 
图 25-125 ”选择 要 重复 的 表格 25-126 【重复 区 域 】 对 话 框 


E65 单 击 【 确 定 】 按 钮 回 到 编辑 页 面 ， 会 发 现 先前 所 选取 要 重复 的 区 域 左 上 角 出 现 
了 一 个 【重复 】 灰 色 标 签 ， 这 表示 已 经 完成 设置 ， 如 图 25-127 所 示 。 

EEaE 首先 选取 左边 栏 中 的 【修改 】 文 字 ， 然 后 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 
器 行为 】 面 板 上 的 出 按钮 ， 在 弹出 的 菜单 中 选择 Go To Detail Page 命令 ， 打 开 Go 
To Detail Page 对 话 框 ， 单 击 【 浏 览 】 按 钮 ， 打 开 【 选 择 文件 】 对 话 框 ， 选 择 admin 
文件 夹 中 的 type_upd.php， 其 他 设置 为 默认 值 ， 如 图 25-128 所 示 。 


Go To Detail page x 

















Hinfid ~ 
传递 现 有 参数 : 口 URL 参政 
口 未 单 台 数 














图 25-127 添加 重复 区 域 的 效果 图 25-128 设置 【修改 】 转 向 的 详细 页 面 


GEE 选取 【删除 】 文 字 并 重复 上 面 的 操作 ， 要 转 到 的 详细 页 面 改 为 type_deLphp， 如 
图 25-129 所 示 。 

EE 后 台 管理 是 管理 员 在 后 台 管理 入 口 页 面 admin login php 中 输入 正确 的 账号 和 密 
码 才 可 以 进入 的 一 个 页 面 ， 所 以 必须 设置 限制 对 本 页 的 访问 功能 。 单 击 【 应 用 程 
序 】 面 板 组 中 的 【服务 器 行为 】 面 板 中 的 国 按 钮 ， 在 弹出 的 菜单 中 选择 【用 户 身份 
验证 】 一 【限制 对 页 的 访问 】 命 令 ， 如 图 25-130 所 示 。 

EE 在 打开 的 【限制 对 页 的 访问 】 对 话 框 中 将 【基于 以 下 内 容 进行 限制 】 设 置 为 

【用 户 名 和 密码 】， 如 果 访问 被 拒绝 ， 则 转 到 首页 index.php， 如 图 25-131 所 示 。 
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Go To Detail page x 
i | ED 
详细 信息 页 : type_del. php K | 是 驱 | 
传递 URL 枯 数 [inf-39 | Em 
记录 入 Re | 
列 [eid | 
传递 现 有 着 数 口 URL 参数 
口才 单 多数 
25-129 ”设置 【删除 】 转 向 的 详细 页 面 图 25-130 选择 【限制 对 页 的 访问 】 命 令 
限制 对 页 的 访问 医 





基于 以 下 内 容 进行 限制 : 回 用 户 名 和 密码 





如 果 访 问 被 拒绝 ， 风 续 到 | 











图 25-131 【限制 对 页 的 访问 】 对 话 框 


ER 单 击 【确定 】 按 钮 ， 就 完成 了 后 台 管理 主页 面 admin.php 的 制作 ， 预 览 效 果 如 
图 25-132 所 示 。 








雇 竺 葛 八 本 人 各， 从 文 到 必 吃 果 卜 闪 身 健 体 [ 申 改 [ 肌 际 ] 
喀 上 庙 煌 比 早 上 效果 好 建议 晓 饭 后 1 小 8 开始 [站 出 阶 ] 
管理 员 你 好 ! 请 你 添加 信息 资讯 
牛奶 不 能 空 最 时 9 蝎 牛奶 有 五 个 虹 区 [闪光 [加 除 ] 
添加 信息 资讯 
漆 加 信息 分 类 钛 季 干 煤 上 火 “大 食疗 方 陆 炎 也 烛 浴 沁 1 出 除 ] 
管理 品 你 好 ! 请 你 管理 信息 分 类 过 天 养生 汤 首选; 巢 仇 介 基 荣 [ 才 玫 出 除 ] 
类 型 管理 7 匡 能 康 关 生 粥 有 效 调理 防治 内 [ 作 耻 :而 除 ] 
养生 之 道 。 修改] [ 副 除 四 四 本 
| 读 莹 台 要 论 水 四 种 水 ， 哪 一 种 更 利于 性 [起 禾 ] [加 除 ] 
运动 养生 。。 -修改 ] [ 副 除 伙 季 寺 号 感冒 怎么 办 ? 三 和 以 品 凤 你 快 点 好 [者 六 [前 除 ] 
全 多 天气 训 , 定 记 着 生 歌 过 次 [出 除 ] 
区 分 过 后 早 绚 副 莽 加 大 医生 推 阳 外 运动 深 家 保 估 [反光 2[ 抽 除 ] 
下 -个 最 后 -页 


25-132 后台 管理 主页 面 效 果 


25.4.3 ”新 增 信息 页 面 


新 增 信息 页 面 mformation_add.php 主要 用 来 实现 插入 信息 的 功能 。 有 具体 操作 步骤 如 下 。 
创建 information add.php 静态 页 面 ， 效 果 如 图 25-133 所 示 。 


官 理 员 ， 作 好 : 请 订 加 信息 





IE 


Ms | 加 fe 











营 沙 崩 丰 尖 凯 如 齐 站 忆 一 一 2 全 新 泗 央 蕉 其 坤 Sz 小 局 




















[E37] 
图 25-133 新 增 信息 静态 页 面 


EEC) 单 击 【 绑 定 】 面 板 上 的 出 按 钮 ， 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 
打开 的 【记录 集 】 对 话 框 中 ， 输 入 设 定 值 如 表 25-12 所 示 的 数据 ， 再 单 击 【确定 】 
按钮 即 完成 设置 ， 如 图 25-134 所 示 。 











表 25-12 ”记录 集 的 表格 设 定 





名 称 
连接 
表格 


























图 25-134 【记录 集 】 对 话 框 


ECERS) 绑 定 记录 集 后 ， 单 击 【信息 分 类 】 的 列表 菜单 ， 在 【信息 分 类 】 的 列表 菜单 
【属性 】 面 板 中 ， 单 击 【动态 】 按 钮 ， 在 打开 的 【动态 列表 /菜单 】 对 话 框 中 设置 如 


和 
so1@ 
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表 25-13 所 示 的 数据 ， 设 置 完成 后 如 图 25-135 所 示 。 
表 25-13 动态 列表 /菜单 的 表格 设 定 














属 性 设置 值 
来 自 记 录 集 的 选项 Recordsetl 
值 type id 
标签 type_name 
选取 值 等 于 Recordsetl 记录 集中 的 type_name 字段 


EC 单 击 【 选 取 值 等 于 】 右 侧 的 刍 按 钮 ， 打 开 【 动 态 数据 】 对 话 框 ， 在 其 中 选择 记 
录 集 的 type_name 字段 ， 如 图 25-136 所 示 。 















































动 志 列 表 / 草 单 X 
Wp: RA 一 一 二; [日 车 记录 集 (Reoordsetl) 上 能] 
利和 加 加 ED] 部 有 人 取消 
值 这 部 助 (0) 
来 自 记 录入 法 而 [Rocoriseti 可 
值 : :ype_id ~ 
村 司 
和 取信 海 于 到 格式 : 无 v 
He [C9php echo $row_Recordsetl[ type, 
图 25-135 【动态 列表 /菜单 】 对 话 框 图 25-136 【动态 数据 】 对 话 框 


葬 于 BY 单 击 【 确 定 】 按 钮 ， 返 回 到 【动态 列表 /菜单 】 对 话 框 ， 完 成 动态 数据 的 绑 定 ， 
如 图 25-137 所 示 。 

EC 将 光标 定位 在 【发 送 】 按 钮 左 人 出， 选择 【插入 】 一 【表单 】 一 【隐藏 域 】 命 
令 ， 命 名 为 inf_time， 然 后 在 【属性 】 面 板 中 的 【 值 】 文 本 框 中 输入 如 下 代码 : 


<?php echo date("Y-m-d H:i:s")?> 


如 图 25-138 所 示 。 
































动态 列表/ 苹 单 x 
pe 在 本 Ta ~ 
[到 | 这 了 了 各 
基态 过 加 到 [ES] 者 且 
值 林 签 
来 自 记录 集 的 迁 硬 。 Recordset] “| 
信 mei | 
me [ER 
六 值守 于 [Cap ecio OULRECOEGSEEIT | I 二 = re A 
inf_time 值 QJ | cphp echo date("Y-m-d lti:s")?) 到 
图 25-137 ”完成 动态 数据 的 绑 定 图 25-138 设置 隐藏 区 域 的 名 称 和 值 


今 5" 


四 TD 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 外 按钮 ， 在 弹出 的 菜单 
中 选择 【插入 记录 】 命 令 ， 打 开 【 插 入 记录 】 对 话 框 ， 输 入 如 表 25-14 所 示 的 数 
据 ， 并 设 定 【 插 入 后 ， 转 到 】 为 adtminphp， 如 图 25-139 所 示 。 


表 25-14 插入 记录 的 表格 设 定 

















属 性 设置 值 设置 值 
连接 information forml 
插入 到 表格 information 表单 字段 与 数据 表 字 段 相对 应 
插入 后 ， 转 到 
插入 记录 x 
提交 值 ， 自 : | foral v L 证 
连接 -infornation ~ 取消 
导 助 


插入 表格 : infornation ~ 
区 大 




















。 nn xz | 
sat， 某 职 全 作为 ， 文 本- 
这 有 内 
值 : POR inf_title 四 
提交 为 :文本 
插入 后 ， 转 到 [adnin. php ] 

















图 25-139 【插入 记录 】 对 话 框 


EED 单 击 【确定 】 按 钮 完成 插入 记录 功能 ， 选 择 【 窗 口 】 一 【行为 】 命 令 ， 打 开 
【行为 】 面 板 ， 单 击 【行为 】 面 板 上 的 弛 | 按钮 ， 在 弹出 的 菜单 中 ， 选 择 【检查 表 
单 】 命 令 ， 打 开 【 检 查 表单 】 对 话 框 ， 设 置 【 值 】 为 【必需 的 】，【 可 接受 】 为 
【任何 东西 】， 如 图 25-140 所 示 。 

ET 单 击 【确定 】 按 钮 回 到 编辑 页 面 ， 即 完成 information_add.php 页 面 的 设计 。 保 
存 文件 后 预览 效果 ， 在 其 中 根据 提示 输入 需要 添加 的 信息 内 容 ， 如 图 25-141 所 示 。 


x 
© Er | Ge 
文件 ( 站 。 饮 注 (E) 全 吾 fV) 收藏 天 A) 工 其 (1) 苦 盎 (HH) 
































































EE 你 未 加 信息 ! 网 
检查 去 第 x 
3 
2 
2 
治疗 加 宕 、 骨 冶 - 各 果 再 注入 桩 国 ， 就 是 
疙 业 员 等 使 月 品 于 棒 计 较 襄 的 人 » 
方 》 中 记载 了 将 虹 杰 、 捐 耳 和 冰 大 一 起 直 
| 可 接受 加 人 全 革 西 OF 
红 半 水 ， 到 人 丝 性 匠 时 ,条 只 芭 要 : 闪 过 小 
口 电子 邮 昕 地 址 。 口交 字 从 到 # 桂圆 各 红 复 都 有 补 身 的 功夫 ， 址 出 的 党 重生 送 
“= 打 生 末 。 支 视 有 县 划 
| 1 市 图 
图 25-140 【检查 表单 】 对 话 框 图 25-141 添加 信息 


i 
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EC 单 击 【 发 送 】 按 钮 ， 即 可 将 信息 内 容 添加 到 网 站 后 台数 据 库 中 ， 并 在 管理 员 主 
页 面 中 显示 出 来 ， 如 图 25-142 所 示 。 








@-' @ hapJ/localhosunewsjadmin D - 0 | @ 后 sep 
文件 月。 入 很 6) 查看 (V) 收藏 只 (A) 工具 (T) 大 动 (H) 


Ow DL gy 且 


红枣 六 种 黄金 屹 法 补血 又 养 于 














fghhhhh 
管理 员 你 好 : 请 你 添加 信息 资讯 
1 秋季 蓝 卜 春 人 苯 ， 从 头 到 尾 旋 萝卜 强身 健 体 
添加 信息 分 类 晚上 争 炼 比 早 上 效果 好 ? 建议 晚饭 后 1 小 时 开始 
管理 员 你 好 ! 请 你 管理 信息 分 类 牛 六 不 能 空 上 喝 ? 喝 牛奶 有 五 个 误区 
类 型 管理 秋季 干 焊 上 火 4 大 食疗 方 降 火 科 娄 
状 生 之 通 。。。 【修改 ] [WW] 秋天 养生 汤 首选 束 保 健 天 
饮食 养生。 [修改 ] [出 除 ] 
eb 7 妆 健康 养生 粥 有 效 调理 防 光滑 兴 
v 
【4 > 





图 25-142 成 功 添加 信息 后 的 效果 
25.4.4 ”修改 信息 页 面 


修改 信息 页 面 information_upd.php 的 主要 功能 是 将 数据 表 中 的 数据 送 到 页 面 的 表单 中 进 
行 修改 ， 修 改 数据 后 再 将 数据 更 新 到 数据 表 中 。 
具体 操作 步骤 如 下 。 
EEC 打开 information updphp 页 面 ， 单 击 【 应 用 程序 】 面 板 组 中 的 【 绑 定 】 面 板 上 
的 出 按 钮 ， 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 杠 
中 ， 输 入 设 定 值 如 表 25-15 所 示 的 数据 ， 再 单 击 【确定 】 按 钮 即 完成 设置 ， 如 图 25-143 
所 示 。 


表 25-15 记录 和 集 的 表格 设 定 


| 设置 什 


Recordsetl 
information 数据 域 mnf id 二 URL 参数 inf id 











information 





EEJPe 用 同样 的 方法 再 绑 定 一 个 记录 集 Recordset2， 在 【记录 集 】 对 话 框 中 输入 如 
表 25-16 所 示 的 数据 ， 该 记录 集 用 于 实现 下 拉 列 表 框 动态 数据 的 绑 定 ， 再 单 击 【 确 
定 】 按 钮 即 完成 设置 ， 如 图 25-144 所 示 。 


表 25-16 记录 集 的 表格 设 定 










设置 值 





| Recordset2 



















































记录 集 X 记录 集 x 
名 称 : Recordset]| 确定 名 称 : 区 ecordset2 | | 
连接 : infornation ~ | 十 X 取消 连接 :iaferaatian 可 总 一 取消 | 
测试 了 到 | 
表格 :inEarmati on 可 委 相 :|inforaation_type 可 
下 加 他“ 口 选 让 的 二 开国 2 | 
等 二 pe 部 助 | 
a type_nane 
Ee ~ 科 选 : 无 加 局 
> 三 基数 
~| 轩 忆 ~ 排序 : 无 ~ 一 康 

















图 25-143 【记录 集 】 对 话 框 25-144 ”设置 记录 集 Recordset2 


ESEJe) 绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 information_upd.php 网 页 中 的 适当 位 
置 ， 如 图 25-145 所 示 。 


管理 员 ， 你 好 ! 请 你 修 约 信息 ! 














| 信息 标题 : {Recordset1, inf_title} 

区 新 时 间 : 

| 信息 分 类 : 作者 : | {Recordsetl 
Recordseti. inf content] 

信息 上 可: 

















[更新 | 重 设 ] 








图 25-145 ”字段 的 插入 

EEC 在 【更 新 时 间 】 一 栏 中 必须 取得 系统 的 最 新 时 间 ， 方 法 是 在 【更 新 时 间 】 的 文 
本 域 属性 栏 中 的 初始 值 加 入 代码 <%=now0%>， 如 图 25-146 所 示 。 

<?php echo date("Y-m-d H:i:s")?> 

// 取 得 系统 当前 时 间 

攻 BY 单 击 【 信 息 分 类 】 的 列表 菜单 ， 在 【信息 分 类 】 的 列表 菜单 【属性 】 面 板 中 ， 
单 击 【 动 态 】 按 钮 ， 在 打开 的 【动态 列表 /菜单 】 对 话 框 中 设置 如 表 25-17 所 示 的 数 
据 ， 如 图 25-147 所 示 。 
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表 25-17 动态 列表 /菜单 的 表格 设 定 











属 性 设置 值 
来 自 记 录 集 的 选项 Recordset2 
值 type id 
标签 type_name 
选取 值 等 于 Recordsetl 记录 集中 的 type id 字段 














文本 域 字符 宽度 mW) 30 类 型 回 单行 6) 。 祝 多 行 办 中 密友 中) 
Jinf_time 最 条 字符 数 初始 值 CI) |<?php echo date CY-m-d lli:s")?> | 到 
禁用 中 ) 
只 读 中 ) 














25-146 ”加 入 代码 取得 最 新 时 间 


ED 单 击 【 选 取 值 等 于 】 右 侧 的 【动态 数据 】 按 钮 ， 打 开 【 动 态 数据 】 对 话 框 ， 在 
其 中 选择 Recordsetl 记录 集中 的 type_id 字段 ， 如 图 25-148 所 示 。 


















































下 X 动 术 歼 所 
荣昌 [De 在 来 En ~ We 城 5[ 日 印记 录入 (hecordsetz) 王政 乙 
EE 昌 = 
了 3 J || type_nane 
ee Ee 加 日 国 记录 第 (hecordset1) ET 
人 村 答 多 infid 
inftitle 
F inf_content 
E Finftine 
来 自 记录 集 的 选项 。 Racerdset2 四 多 inf_eathor 
值 : type_ 计 ~ 
标 答 :type_mame ~ 
EE [| 网 格式 : 无 四 
fe | ?php echo 和 row_Recordsetl[ type.| 
25-147 【动态 列表 /菜单 】 对 话 框 25-148 【动态 数据 】 对 话 框 


EDDDD 将 光标 定位 在 【 重 设 】 按 钮 右 侧 ， 选 择 【 插 入 】 一 【表单 】 一 【隐藏 】 命令， 
命名 为 inf i 4， 然后 在 【属性 】 面 板 中 的 【 值 】 文 本 框 中 输入 如 下 代码 : 
<?php echo $row Recordsetl['inf id']; ?> 
如 图 10-149 所 示 。 
Et | 


Ne 
[inf_id 值 QJ) | 人 ?php echo $row Recordseti[ inf 多 





10-149 ”设置 隐藏 区 域 的 名 称 和 值 


EESUE 完成 表单 的 布置 后 ， 在 information_upd.php 页 面 中 单 击 【 应 用 程序 】 面 板 组 中 
【服务 器 行为 】 面 板 上 的 志 按 钮 ， 在 弹出 的 菜单 中 选择 【更 新 记录 】 命 令 ， 如 图 25-150 


Gso6 


























加 一 
第 
所 示 。 加 
EEC 在 打开 的 【更 新 记录 】 对 话 框 中 ， 输 入 如 表 25-18 所 示 的 值 ， 如 图 25-151 所 示 。 本 | 
表 25-18 更 新 记录 的 表格 设 定 司 
属 性 设置 什 则 
提交 值 ， 自 例 
连接 information | 
更 新 表格 information 开 
表单 元 素 表单 字段 与 数据 表 字段 相对 应 从 
唯一 键 列 用 
在 更 新 后 ， 转 到 中 
篆 : 
要 新 己 录 x 统 
靖 定 
CW 
.| 






Go To Detail Page 
Go To Related Page 




















播 和 记录 rr 
更 新 a 录 BR 
制 除 记录 
图 25-150 选择 【更 新 记录 】 命 令 图 25-151 【更 新 记录 】 对 话 框 


EEC 单 击 【确定 】 按 钮 ， 完 成 修改 信息 页 面 的 设计 ， 预 览 效果 如 图 25-152 所 示 。 





区 
养生 记 

至 划 子 不 旺 者 ”。 红 志明 安 出 的 将 点 是 
人 生理 训 量 村。 市民 访 元 条 基站 是 呈 兴 丰 生 全 列 这 入 
大 汪 的 让 
二 纪 素 为 水 

全 这 的 ” 寂 罗 训 全 :富力 和 的 总 帮 . 纪 时 度 坚 向 开 条 治 


做 ， 起 果 波 业 六 汶 ， 很 交 其 有 对 所 分 元 全 尖山， 汪 比 最 好 改革 阐 开 


入 Es 

生 归 各 委 和 和， 本 这 、 轩 六 。 上 

| 迟 息 内 奉 : 人 | 草 
人 人 下 法 靳 著 《 必 划 方 六 中 记载 了 将 红 刘 ,要 瑟 和 冰 敌 一 世 帮 





， 补血 养 机 
用 抽 过 加 性 图 信 全 准 炒 ， 到 过 糙 性 国 交 时 ， 打 只 光 要 . 续 纺 用 小 
类 重 允 十” 红 素 、 性 区 红 冰 才 有 补血 的 办 效 ， 间 出 的 讲 稍 涝 


条 二 数 绍 ， 实 神 有 加 
法 ， 文 性 有 淋 才 不安、 心神 不 末 竺 症状。 可 月 迁 二 百合 、 
二 可 更 好 基 发 控 旨 机 安 祝 允 将 同 = 
EN -| 


画 ”证 一 
图 25-152 ”修改 信息 页 面 的 效果 


EEC 例如 这 里 将 该 信息 的 标题 修改 为 【红枣 的 六 种 吃 法 ! 】， 然 后 单 击 【 更 新 】 按 
钮 ， 页 面 会 自动 转 到 admin php 页 面 ， 在 其 中 可 以 看 到 修改 之 后 的 信息 ， 如 图 25-153 
所 示 。 





大 
so 





so 
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Ou: TIL 


红枣 的 六 种 旋 法 ! 


fehhhhh 
管理 员 你 好 ! 请 你 添加 信息 资讯 
秋季 萝卜 赛 人 需 ， 从 头 到 尾 吃 萝卜 强身 健 体 


添加 信息 资 计 
添加 信息 分 类 晚上 乌 炸 比 早上 效果 好 ? 建议 晚饭 后 1 小 时 开始 
管理 员 你 好 : 请 你 管理 信息 分 类 ! 牛奶 不 能 空 大 蝎 ? 喝 牛 奶 有 五 个 误区 
类 型 管理 秋季 干燥 上 火 4 大 食疗 方 降 火 河 爆 
养生 之 省 [修改 ] [ 抽 除 ] 秋天 养生 汤 首选 5 款 保 健 蔬菜 


饮食 养生 [修改 ] [删除 ] 


Si 7 健 康 养生 粥 有 效 调理 防治 加 


谈 茶 必要 论 水 四 种 水 ， 哪 一 种 更 利于 泡 茶 ? 


25-153 ”修改 标题 后 的 效果 


25.4.5 ”删除 信息 页 面 


删除 信息 页 面 的 制作 方法 与 修改 信息 页 面 的 制作 方法 差不多 ， 其 方法 是 将 表单 中 的 数据 
从 站 点 的 数据 表 中 删除 。 
有 具体 操作 步骤 如 下 。 
EC 打开 information delphp 页 面 ， 单 击 【 应 用 程序 】 面 板 组 中 的 【 绑 定 】 面 板 上 的 
地 按钮 ， 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 
框 中 ， 输 入 设 定 值 如 表 25-19 所 示 ， 再 单 击 【确定 】 按 钮 即 完成 设置 ， 如 图 25-154 
所 示 。 


表 25-19 记录 集 查 询 的 表格 设 定 

属性 | 设置 从 | 属性 | 

名 和 
连接 inf d=URL 参数 inf id 

表格 
GET 用 同样 的 方法 再 绑 定 一 个 记录 集 ， 在 打开 的 【记录 集 】 对 话 框 中 ， 输 入 设 定 值 

如 表 25-20 所 示 ， 单 击 【确定 】 按 钮 即 完成 设置 ， 如 图 25-155 所 示 。 
表 25-20 ”记录 集 的 表格 设 定 


= 
名 称 Recordset2 列 
表格 inf type 排序 


设置 值 














ny 


















































25-154 【记录 集 】 对 话 框 25-155 ”设置 记录 集 Recordset2 


绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 information_del.php 网 页 中 的 适当 位 置 ， 
如 图 25-156 所 示 。 其 中 需要 注意 的 是 将 inf id 字段 拖 忠 到 隐藏 域 上 。 


管理 员 ， 你 好 ! 你 要 图 此 信息 中? 
[Recordsetl, inf title} | 
作者 : | [Recordsetl 

人 ecordsetl inf_content] 





车 沙 骨 下 尖 岂 邵 齐 直 忆 一 一 2 齐 靖 洒 岂 了 落 装 ” 册 Sz 洲 品 


pp A 

















图 25-156 字段 的 插入 


EEC) 绑 定 记录 集 后 ， 单 击 【 信 息 分 类 】 的 菜单 ， 在 【信息 分 类 】 的 菜单 【属性 】 面 
板 中 ， 单 击 【 动 态 】 按 钮 ， 在 打开 的 【动态 列表 /菜单 】 对 话 框 中 设置 如 表 25-21 所 
示 的 数据 ， 如 图 25-157 所 示 。 


表 25-21 动态 列表 /菜单 的 表格 设 定 











属 性 设置 值 
来 自 记录 集 的 选项 Recordset2 
值 e id 
标签 type_name 
选取 值 等 于 Recordsetl 记录 集中 的 type id 字段 


EEDD) 完成 表单 的 布置 后 ， 要 在 information_del.php 页 面 中 单 击 【 应 用 程序 】 面 板 组 中 
【服务 器 行为 】 面 板 上 的 册 按 钮 ， 在 弹出 的 菜单 中 选择 【删除 记录 】 命 令 ， 在 打开 
的 【删除 记录 】 对 话 框 中 ， 输 入 设 定 值 如 表 25-22 所 示 ， 设 置 如 图 25-158 所 示 。 

EC) 单 击 【确定 】 按 钮 ， 完 成 删除 信息 页 面 的 设计 。 然 后 进入 网 站 的 后 台 管理 中 


大 
so 








案例 课堂 








动态 列表 / 荣 单 x 


心 ， 如 图 25-159 所 示 ， 在 这 里 可 以 对 网 页 的 信息 进行 删除 和 修改 处 理 。 





菜单 “type_nane” 在 表单 人 ornl” ~ 


背 态 选 质 因 加 ES 


标签 





3 EL gy 
多 infid 
Finftitle 





inf_content 
F inftine 
Finf_suthor 
日 印 记录 集 (Recordset2) 
多 typeid 
FF type nme 








标签: type_nane 加 
选取 值 等 于 ，[<?php_ echo 4rov_Recordset1r | 有 格式 : 元 可 























ME [C7php echo $row_Recordsetll tympe] 

















攻 助 (0) 





图 25-157 ” 绑 定 动态 列表 /菜单 
表 25-22 ”删除 记录 设 定 


| 设置 值 ， | 属性 | 
首先 检查 是 否 已 定义 变量 。 | 主 if 





删除 后 ， 转 到 








3 采 x 
首先 检查 星 否 已 定义 实 量 : 主 训 和 加 
连接 ，informwstion ~ 取消 
表格 ”information vv 那 助 
主 捉 列 inf id 司 回 数值 
主键 值 .WEL 参数 Es 
全 除 后 ， 转 到 [adnin. php 浏览 














图 25-158 【删除 记录 】 对 话 框 


wr TD Wr PR 








Tas (a I 
an [ 
证 作 汉 加 信息 资讯 

ER 共存 村人 节 ， 从 这 到 司 吃 革 卜 二 号 时 Un) LR 
生 如 从 分 类 只 上 滑 类 比 呈 上 入 困 李 ? 建 议 久生 后 )4. 到 开 雪 [ 
位 生 而 你 寻 : 你 符 理 售 息 分 直 姑 不 驼 斌 大 虽 9 四 咎 奶 五 误区 [ll 
a 上 和 区 季 干 屋 上 “大 全 六方 肝炎 和 全 [ll 
拓 生 之 首相 弦 ] [MM 天 亲 全 再 首 运 5 委 全 估 过 衬 [ 

信人 二。 [ 拓 玖 1 际 ] 
eve tnd tM 1 过 全 天 生 溃 户 汝 党 再 并 [ 
和 各 要 沦 术 下 和 水， 各 一 可 厂 利 于 当 春 ?7 [ll 
二 守 吕 局 已 下 办 ?三 入 记忆 有 全 安 上 全 [ LR 

下 -十 二 后 -页 


25-159 ”后台 管理 中 心 





EC 单 击 想 要 删除 的 信息 右 侧 的 【删除 】 链 接 ， 进 入 删除 信息 页 面 ， 如 图 25-160 















































所 示 。 
管理 员 ， 你 好 作 要 唱和 此 信息 中? 
全， 
信息 分 类 : E22 Ea 
htffhgfjhzjhjhhgh 
信息 内 容 : 
国 司 ® 




















图 25-160 ”删除 信息 页 面 


EB 单 击 【删除 】 按 钮 ， 返 回 到 后 台 管理 中 心 页 面 ， 可 以 看 到 选择 的 信息 已 经 被 删 
除 ， 如 图 25-161 所 示 。 


健康 养生 恕 品 来 夏 假 太 Wr 万 下 


www.ikjan com 
红 可 的 六 了 冲 临 法 1 
秋季 萝卜 赛 人 莉 ， 从 头 到 尾 旋 萝卜 理 身 健 御 
腕 上 租 业 比 蛙 上 歼 果 好 4 洁 议 瞳 饭 后 1 小 8 开始 


管理 而 你 好 ! 请 你 洪 加 便 乱 视讯 


生 加 信息 次 讯 

添加 信息 分 类 站 奶 趟 能 空间 唱 咎 奶 有 五 个 误区 

管理 员 仰 好: 青 你 管 测 便 息 分 类 ! 秋季 干燥 上 火 4 大 让 疗 方 际 火 往 燥 
记 昌 和 天 养生 酒 首 法 5 丈 从 健 法 荣 

亲生 之 道 。。【 修 由 ] [了 只] ?或 能 朗 养生 粥 有 效 调 昌 防治 冰 炎 


饮食 养生 [修改 ] [出 除 ] 


把 吉 半生 [个 未 | [9 次 入 必要 论 水 四 入 水 ， 哪 一 种 生 利 于 淆 于 ? 


秋 竹 宫 易 感 下 怎么 办 ? 三 神 沈 品 助 你 快 点 好 
金秋 天 气 京 , 丰 记 养生 歌 





25-161 ”删除 信息 后 的 效果 


25.4.6 ”新 增 信息 分 类 页 面 


新 增 信息 分 类 页 面 type_add.php 的 功能 是 将 页 面 的 表单 数据 新 增 到 information type 数据 
表 中 。 

有 具体 操作 步骤 如 下 。 四 

EC 打开 type addphp 页 面 ， 单 击 【 应 用 程序 】 面 板 组 中 的 【 绑 定 】 面 板 上 的 出 | 按 
钮 ， 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 ， 输 
入 设 定 值 如 表 25-23 所 示 ， 再 单 击 【确定 】 按 钮 即 完成 设置 ， 如 图 25-162 所 示 。 

EEJpy 单 击 【应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 册 按 钮 ， 在 弹出 的 菜单 
中 选择 【插入 记录 】 命 令 ， 在 打开 的 【插入 记录 】 对 话 框 中 ， 输 入 设 定 值 如 表 25-24 
所 示 ， 并 设 定 新 增 数据 后 转 到 系统 管理 主页 面 admin.php， 如 图 25-163 所 示 。 





营 沙 崩 丰 尖 凯 如 蛮 站 忆 一 一 2 章 兰 洒 司 落 总 ” 才 9Z 小 重 


. 
co 
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表 25-23 ”记录 和 集 查询 的 表格 设 定 











设置 值 





| Recordsetl 





information type 


表 25-24 ”插入 记录 的 表格 设 定 








属 性 设置 值 

连接 information 
插入 表格 information type 
插入 后 ， 转 到 admin.php 
提交 值 ， 自 forml 
表单 元 素 表单 字段 与 数据 表 字 段 相对 应 
记录 人 x 

和 名称: Recordsetl ] 确定 机 A 只 x 
连接 infornation J 定义 取消 失 交 全 ,和 :ED Ca 
开关 TEST | Mt 过 者- ES 

列国 人 部“ 口 过 定 的 高 级 括 入 条 特 : infermation_type 





wi ee eT 一 
多 选 殉 悦 医 


信 - ro type_nane 
-一 3 
排序 无 v| 国 了 恬 入 后， 人 am) EL 














图 25-162 【记录 集 】 对 话 框 图 25-163 ” 设 定 插入 记录 


EEC 选择 【窗口 】 一 【行为 】 命 令 ， 打 开 【 行 为 】 面 板 ， 单 击 【 行 为 】 面 板 中 的 出 
按钮 ， 在 弹出 的 菜单 中 选择 【检查 表单 】 命 令 ， 打 开 【 检 查 表单 】 对 话 框 ， 设 置 
【 值 】 为 【必需 的 】、【 可 接受 】 为 【任何 东西 】， 如 图 25-164 所 示 。 





检 吉 表单 x 
一 一 一 一 一 
庆 取消 
— - 者 有 
值 回 必需 的 








图 25-164 【检查 表单 】 对 话 框 


S 602 


TZ 单 击 【确定 】 按 钮 ， 完 成 type_add.php 页 面 设计 。 在 IE 浏览 器 中 打开 网 站 后 台 
管理 中 心 页 面 ， 在 其 中 单 击 【 添 加 信息 分 类 】 链 接 ， 如 图 25-165 所 示 。 


来 政 候 Wp” 


红 齐 的 六 种 屹 法 ! 


秋季 萝卜 赛 人 着 ， 从 头 到 尾 吃 萝卜 强身 能 体 
管理 员 你 好 ! 请 你 添加 信息 资讯 
晚上 钼 炼 比 早上 效果 好 了 建议 晚饭 后 1 小 时 开始 





添加 信息 资讯 

| 牛奶 不 能 空 大 喝 ? 喝 牛 奶 有 五 个 误区 

管理 员 你 好 ! 请 你 管理 信息 分 类 ! 秋季 干 煤 上 火 4 大 食疗 方 降 火 和 如 
类型 管理 秋天 养生 汤 首先 5 教 保健 基 荣 

覃 生 之 道 。。 【修改 】 [出 除 ] 1 或 健康 养生 粥 有 效 调理 防治 峭 炎 


饮食 养生 [修改 ] 【删除 ] 


运动 养生 [修改 ] 【删除 ] 谈 条 必要 论 水 四 种 水 ， 哪 一 种 更 利于 泡 茶 ? 


秋季 容易 感冒 怎么 办 ? 三 种 饮品 助 你 快 点 好 
全 秋天 气 京 , 牢记 养生 歌 


中 沙 风 吧 尖 磺 如 刘坤 忆 一 一 齐 冰 开局 孙 装 ” 才 92 洲 





图 25-165 单 击 【添加 信息 分 类 】 链 接 
ECG 打开 添加 信息 分 类 页 面 ， 在 【信息 





分 类 名 称 】 文 本 框 中 输入 【四 季 养 管理 员 ! 请 你 添加 信息 分 类 ! 

生 】， 如 图 25-166 所 示 。 信息 分 类 名 称 : | 四 攻关 和 主 | 
TY 单 击 【 添 加 】 按 钮 ， 即 可 完成 信息 ED 

分 类 的 添加 操作 ， 打 开 健 康 养 生 网 站 1 


的 首页 ， 在 其 中 可 以 看 到 添加 的 养生 
分 类 信息 【四 季 养 生 】， 如 图 25-167 
所 示 。 


© Wt Mb 


运动 靖 仙 健身 打 太 养生 四 手 养生 居家 人 群 女士 名 人 上班 族 
之 道 养生 误区 疾病 养生 男士 昌 跟 中 老年 





养生 分 类 最 新 养生 资讯 Information 
养生 之 首 . 
饮食 养生 红 囊 的 六 种 吃 法 ! 2017/9/29 18:28:23 
运动 养生 秋季 萝卜 赛 人 参 ， 从 头 到 尾 吃 萝卜 强身 健 体 2017/3/14 16:48:32 
四 季 养 生 


晚上 自 昧 比 早上 效果 好 ? 建议 晚饭 后 1 小 时 开始 2017/3/15 11:26:22 


图 25-167 ”添加 信息 分 类 后 的 效果 
25.4.7 ”修改 信息 分 类 页 面 
修改 信息 分 类 页 面 type_updphp 的 功能 是 将 数据 表 的 数据 送 到 页 面 的 表单 中 进行 修改 ， 


o03@ 
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修改 数据 后 再 更 新 至 数据 表 中 。 
具体 操作 步骤 如 下 。 
EEJDgp 打开 type_ updphp 页 面 ， 并 单 击 【应 用 程序 】 面 板 组 中 的 【 绑 定 】 面 板 上 的 出 
按钮 。 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 ， 输 
入 设 定 值 如 表 25-25 所 示 的 数据 ， 单 击 【确定 】 按 钮 即 完成 设 定 ， 如 图 25-168 所 示 。 


表 25-25 记录 集 的 表格 设 定 











设置 值 
名 称 Recordsetl 全 部 
连接 information ype_id 二 URL 参数 type id 
表格 无 
记录 集 x 


名 称 : Recordset1 
连接 information [证 又 


aEEB 











WRL 参数 ltyweid 
排序 : 无 四 














图 25-168 【记录 集 】 对 话 框 

ET 绑 定 记录 集 后 ， 将 记录 集 的 字段 ”. 
插入 至 type_upd.php 网 页 中 的 适当 。 内! 请 你 从 芍 人 四 分 类 1 
位 置 ， 如 图 25-169 所 示 。 其 中 需要 。 | Eee 人 二 人 一 
注意 的 是 将 type id 字段 拖 电 到 隐藏 
域 上 。 图 25-169 ”字段 的 插入 

完成 表单 的 布置 后 ， 在 四 
type_upd.php 页 面 中 ， 单 击 【 应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 出 | 按 
钮 ， 在 弹出 的 菜单 中 选择 【更 新 记录 】 命 令 ， 在 打开 的 【更 新 记录 】 对 话 框 中 ， 输 
入 设 定 值 如 表 25-26 所 示 的 数据 ， 设 定 后 如 图 25-170 所 示 。 





表 25-26 更 新 记录 的 表格 设 定 











属 性 设置 值 
在 更 新 后 ， 转 到 | 
提交 值 ， 自 








Go 





























在 更 新 后 ， 转 到 : |adnin. php [3 

















图 25-170 【更 新 记录 】 对 话 框 


EEC 单 击 【 确 定 】 按 钮 ， 完 成 修改 信息 分 类 页 面 的 设计 。 在 正 浏览 器 中 打开 网 站 后 
台 管 理 中 心 页 面 ， 在 其 中 单 击 信息 分 类 后 面 的 【修改 】 链 接 ， 如 图 25-171 所 示 。 


OW EL 








红 机 的 六 种 由 法 ! 
管理 员 你 好! 请 你 并 加 信息 次 讯 次 季 莫 卜 赛 人 参 ， 从 头 到 民 放 林 卜 强身 健 体 
添加 信息 总 询 上 深 糙 比 时 上 落果 好 如 议 樟 后 1 小 时 开 妈 | 
添加 信息 分 类 
牛奶 不 能 空 喝 ? 喝 牛 奶 有 五 个 误区 
全 风 作 业 上 清和 类 天 的 分 并 秋季 干燥 上 火 4 大 食疗 方 了 火爆 
类 型 下 秋天 养生 汤 首选 束 保 健 车 荣 
亲生 之 首 。 [人 改 ] [于 
人 1 吉凶 碌 站 生 半 有 阔 调理 防治 汉 类 
运动 妆 生 。。 【个 次 】 [内 读 芝 要 论 水 四 种 水 ， 志和 更 利于 起 基 ? 


四 季 养 生 【修改 ] 【删除 ] 
下 秋季 罕 易 感冒 怎么 办 ? 三 种 饮品 助 你 快 点 好 


金秋 天 气 京 , 牢记 乔 生 歌 





图 25-171 单 击 【 修 改 】 链 接 
ECDD) 打开 修改 信息 分 类 页 面 ， 在 其 中 可 以 对 信息 进行 修改 ， 如 这 里 将 【四 季 养 生 】 
修改 为 【冬季 养生 】， 如 图 25-172 所 示 。 


管理 员 ! 请 你 修改 信息 分 类 ! 
分 类 名 称 : “| 冬季 养生 


名 因 


25-172 ”修改 分 类 名 称 


攻 了 BY 单 击 【 修 改 】 按 钮 ， 即 可 完成 信息 分 类 的 修改 操作 ， 进 入 后 台 管 理 中 心 页 面 
中 ， 可 以 看 到 修改 后 的 结果 ， 如 图 25-173 所 示 。 


涛 洲 贮 哮 汉 洲 洒 研 溃 妆 一 z 但 兴 尖 同 吵 冲 _ 翰 92 洲 
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和 健康 养生 


wwwjkjan .com 


管理 员 你 好 : 请 你 地 加 信息 资讯 
添加 信息 资讯 
添加 信息 分 类 


管理 员 你 好 ! 请 你 管理 信息 分 类 ! 





类 型 管理 

养生 之 者 [ 修 玖 ] [种 除 ] 
饮 衣 养生 。。【[ 修 玫 ] [种 除 ] 
运动 养生 。。 [修改] [种 除 ] 
[只 区 [ 捉 际 ] 


ET sw ] 


并 束 的 六 种 星 法 ! 

灾 地 殉 卜 装 人生， 从 头 到 尾 吃 区 卜 治 喘 建 体 
晚上 般 炼 比 早上 效果 好 ? 建议 晚饭 后 1 小 时 开始 
牛奶 不 能 空 关 蝎 ? 唱 牛 奶 有 五 个 误区 
秋季 干燥 上 淡 4 大 食疗 方 降 火 半 燥 
秋天 养生 汤 首选 5 球 保 诗 蔬 菜 
7 元 信康 养生 弗 有 效 调 理 防治 雪 炎 
谈 革 必要 论 水 下 种 水 ， 别 一 种 更 利于 光 茶 ? 
秋 竹 容易 三 骨 怎么 办 ? 二 种 饮品 助 你 快 克 好 


25-173 ”修改 后 的 结果 


25.4.8 删除 信息 分 类 页 面 


删除 信息 分 类 页 面 type_del.php 功能 是 将 表单 中 的 数据 从 站 点 的 数据 表 information_type 


删除 。 有 具体 操作 步骤 如 下 。 


ECDUOD 打开 type_delphp 页 面 ， 单 击 【应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 外接 
钮 ， 在 弹出 的 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 ， 输 
入 设 定 值 如 表 25-27 所 示 的 数据 ， 单 击 【 确 定 】 按 钮 即 完成 设置 ， 如 图 25-174 所 示 。 


表 25-27 ”记录 和 集 查 询 的 表格 设 定 


名 称 
连接 
表格 








记录 集 


连接: |information 


表格 :information_type 





名 称 : [Recordset1 


列国 全 部 〇 过 定 的 : 


[ET 
type_nane 




















稍 选 .type id vl= ~ 
WRL 多 数 typeid 
排序 :大 加 3 
25-174 【记录 集 】 对 话 框 


EEJ2y 绑 定 记 录 集 后 ， 将 记录 集 的 字段 插入 至 type_del.php 网 页 中 的 适当 位 置 ， 


全 606 


图 25-175 所 示 。 其 中 需要 注意 的 是 将 type id 字段 拖 忠 到 隐藏 域 上 。 
刘 要 员 ! 息 大 要 时 和 类 信息? 


分 类 名 称 : [Rectype.t 要 


图 25-175 字段 的 插入 


EEC) 单 击 【 应 用 程序 】 面 板 组 中 的 【服务 器 行为 】 面 板 上 的 凶 按 钮 ， 在 弹出 的 菜单 
中 选择 【删除 记录 】 命 令 ， 在 打开 的 【删除 记录 】 对 话 框 中 ， 输 入 设 定 值 如 表 25-28 
所 示 ， 设 置 如 图 25-176 所 示 。 

表 25-28 删除 记录 的 设 定 


一 | Et | 
首先 检查 是 否 已 定义 变量 





intormation | 
开除 后 ， 转 到 











删除 记录 x 
首先 检查 是 否 忆 定义 详 量 : 主 肆 生 v 
连接 ，information 取消 
表格 -information_type ~ 帮助 
主键 到 type_id 司 回 数值 
主 名 值 WRL 参数 eweid | 
删除 后 ， 转 到 : |adnin. php 浏览 














图 25-176 【删除 记录 】 对 话 框 


EEC 代码 加 入 完成 后 ,在 下 浏览 器 中 打开 后 台 管理 中 心 页 面 ， 单 击 【 冬 季 养 生 】 信 
息 分 类 后 面 的 【删除 】 超 链接 ， 如 图 25-177 所 示 。 


Ou ILL 





筑 过 的 六 种 店 法 ! 
管理 员 你 好 : 请 你 地 加 信息 资讯 多 季 殉 卜 赛 人 参 ， 从 头 到 尾 吃 萝卜 强身 健 体 
添加 信息 资讯 晚上 徐 暴 比 早上 效果 好 ? 建议 脐 饭 后 1 小 时 开始 
添加 信息 分 类 
牛奶 不 能 宇 服 旺 ? 蝎 牛 扔 有 五 十 误区 


次 昌 员 作 籽 ! 请 你 窜 理 信息 分 类 ! Se a 
并 到 eed 秋天 亲生 声 首选 5 蓝 保 健 访 
关 生 之 道 [人 枚 ] [开除 ] 


饮食 差生。 [修改] [出 除 ] 17 教 半 康 养 生 古 有 交 调 埋 态 尾 肖 交 


运动 养生 【[ 修 衣 ] [出 除 ] 次 入 党委 论 水 四 种 水 ， 留 一 种 更 利于 泡 竺 ? 
冬季 养生 。。[ 售 滩 ] [| 
-EY 状 手 守 兄 愿 冒 怎么 办 ? 三 种 饮品 示人 忆 点 好 


25-177 ” 单 击 【删除 】 超 链接 


癌 沙 崩 丰 尖 凯 如 齐 站 忆 一 一 2 章 兰 洒 司 落 总 ” 才 9Z 小 后 
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国 于 BY 即 可 将 该 信息 分 类 删除 ， 可 以 看 到 后 台 管 理 中 心 页 面 中 己 经 不 存在 该 信息 分 类 
了 ， 如 图 25-178 所 示 。 


红 惠 的 六 种 吃 去 ! 
管理 员 你 好 : 请 你 添加 信息 资讯 


秋季 萝卜 容 人 人参 ， 从 头 到 尾 吃 莫 卜 温 身 健 体 
添加 信息 资讯 


晚上 籁 炸 比 早上 效果 好 建议 晚饭 后 1 小 时 开始 
添加 信息 分 类 牛 如 不 能 空 遥 中 9 蝎 牛 有 五 个 误区 
管理 员 你 好 + 请 你 管理 信息 分 天 上 秋季 干 爆 上 火 4 大 俯 力 方 阵 火 得 爆 
类 型 管理 秋天 养生 汤 首选 5 区 保健 基 菏 
韩 生 之 道 。。 【修改 ] [MB] 17 尝 健 厌 养生 张 有 效 调理 防 洛 册 伙 
饮食 养生 。。。 [修改 |】 [ 副 阶 





运动 养生 [修改 ] 【出 除 ] 族 系 必要 论 水 四 种 水 ， 哪 一 神 更 利于 泡 系 ? 


秋季 容易 感冒 怎么 办 ? 三 种 饮品 助 你 快 点 好 


图 25-178 删除 信息 分 类 后 的 效果 
至 此 ， 网 站 信息 资讯 管理 系统 就 开发 完毕 。 读 者 可 以 将 本 章 开 发 信息 资讯 管理 系统 的 方 
法 应 用 到 实际 的 大 型 网 站 建设 中 。 
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py 
第 7 篇 
网 站 全 能 扩展 


和 a 第 26 章 让 别人 浏览 我 的 成 果 一 一 网 站 的 测试 与 发 布 
和 第 27 章 打造 坚实 的 堡垒 一 一 网 站 安全 与 防御 
和 a 第 28 章 增加 网 站 的 点 击 率 一 一 网 站 优化 与 推广 


第 26 章 
让 别人 浏览 我 的 成 果 


一 一 网 站 的 测试 
与 发 布 


将 本 地 站 点 中 的 网 站 建设 好 之 后 ， 需 要 将 站 点 上 传 到 远 端 服务 器 上 ， 供 
Internet 上 的 用 户 浏 览 。 不 过 在 上 传 之 前 ， 还 需要 对 站 点 文件 进行 测试 。 本 章 主要 
介绍 如 何 测试 与 发 布 网 站 。 
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26.1 上 传 网 站 前 的 准备 工作 


在 将 网 站 上 传 到 网 络 服务 器 之 前 ， 首 先 要 在 网 络 服务 器 上 注册 域名 和 申请 网 络 空间 ， 同 
时 ， 还 要 对 本 地 计算 机 进行 相应 的 配置 ， 以 便 完成 网 站 的 上 传 。 


26.1.1 注册 域名 


域名 可 以 说 是 企业 的 “网 上 商标 ”， 因 此 在 域名 的 选择 上 要 与 注册 商标 相符 合 ， 以 便于 
记忆 。 

在 申请 域名 时 ， 应 该 选择 短 且 容易 记忆 的 域名 ， 另 外 最 好 还 要 和 客户 的 商业 有 直接 的 关 
系 ， 尽 可 能 地 使 用 客户 的 商标 或 企业 名 称 。 


26.1.2 ”申请 空间 


域名 注册 成 功 后 ， 需 要 为 自己 的 网 站 在 网 上 安 个 “家 ”， 即 申请 网 站 空间 。 网 站 空间 是 
指 用 于 存放 网 页 的 、 置 于 服务 器 中 的 、 可 通过 国际 互联 网 访问 的 硬盘 空间 ( 即 用 于 存放 网 站 的 
服务 器 中 的 硬盘 空间 )。 

在 注册 了 域名 之 后 ， 还 需要 进行 域名 解析 。 域 名 是 为 了 方便 记忆 而 专门 建立 的 一 套 地 址 
转换 系统 。 要 访问 一 台 互 联网 上 的 服务 器 ， 最 终 还 必须 通过 IP 地 址 来 实现 。 域 名 解析 就 是 将 
域名 重新 转换 为 IP 地 址 的 过 程 。 

一 个 域名 只 能 对 应 一 个 人 地 址 ， 而 多 个 域名 则 可 以 同时 被 解析 到 一 个 IP 地 址 。 域 名 解 
析 需 要 由 专门 的 域名 解析 服务 器 (DNS) 来 完成 。 


26.2 测试 网 站 


网 站 上 传 到 服务 器 后 ， 需 要 做 的 工作 就 是 在 线 测 试 网 站 ， 这 是 一 项 十 分 重要 又 非常 烦琐 
的 工作 。 在 线 测试 工作 包括 测试 网 页 外 观 、 测 试 链接 、 测 试 网 页 程序 、 检 测 数据 库 ， 以 及 测 
试 下 载 时 间 是 否 过 长 等 。 


26.2.1 案例 1 一 一 测试 站 点 范围 的 链接 


测试 网 站 超 链 接 ， 也 是 上 传 网 站 之 前 必 不 可 少 的 工作 之 一 。 对 网 站 的 超 链接 逐一 进行 测 
试 ， 不 仅 能 够 确保 访问 者 打开 链接 目标 ， 还 可 以 使 超 链 接 目标 与 超 链 接 源 保持 高 度 的 统一 。 
在 Dreamweaver CC 中 进行 站 点 各 页 面 超 链 接 测试 的 具体 操作 步骤 如 下 。 
EC 打开 网 站 的 首页 ， 在 窗口 中 选择 【站 点 】 一 【检查 站 点 范围 的 链接 】 命 令 ， 如 
图 26-1 所 示 。 
ED) 在 Dreamweaver CC 设计 器 的 下 端 弹出 【链接 检查 器 】 面 板 ， 并 给 出 本 页 页 面 的 


检测 结果 ， 如 图 26-2 所 示 。 






























































图 26-1 选择 【检查 站 点 范围 的 26-2 【链接 检查 器 】 面 板 
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ECDIS 如 果 需 要 检测 整个 站 点 的 超 链 接 时 ， 单 击 左 侧 的 区 按钮 ， 在 弹出 的 下 拉 菜 单 中 SS 
选择 【检查 整个 当前 本 地 站 点 的 链接 】 命 令 ， 如 图 26-3 所 示 。 
EEC 在 【链接 检查 器 】 面 板 底部 弹出 整个 站 点 的 检测 结果 ， 如 图 26-4 所 示 。 
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图 26-3 检查 整个 当前 网 站 图 26-4 ”站 点 检测 结果 


26.2.2 ”案例 2 一 一 改变 站 点 范围 的 链接 


更 改 站 点 内 某 个 文件 的 所 有 链接 的 具体 操作 步骤 如 下 。 

EEC 在 窗口 中 选择 【站 点 】 一 【改变 站 点 范围 的 链接 】 命 令 ， 打 开 【 更 改 整个 站 点 
链接 】 对 话 框 ， 如 图 26-5 所 示 。 

EC) 在 【更 改 所 有 的 链接 】 文 本 框 中 输入 要 更 改 链接 的 文件 ， 或 者 单 击 右边 的 【 浏 
览 文件 】 按 钮 回 ， 在 打开 的 【选择 要 修改 的 链接 】 对 话 框 中 选中 要 更 改 链接 的 文 
件 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 26-6 所 示 。 

本 TB 在 【 变 成 新 链接 】 文 本 框 中 输入 新 的 链接 文件 ， 或 者 单 击 右边 的 【浏览 文件 】 
按钮 已， 在 打开 的 【选择 新 链接 】 对 话 框 中 选中 新 的 链接 文件 ， 如 图 26-7 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 即 可 改变 站 点 内 某 个 文件 的 链接 情况 ， 如 图 26-8 所 示 。 
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26.2.3 ”案例 3 一 一 查找 和 替换 


在 Dreamweaver CC 中 ， 对 整个 站 点 中 所 有 文档 进行 源 代 码 、 标 签 等 内 容 查找 和 替换 的 具 
体操 作 步 骤 如 下 。 


EEJDp 选择 【编辑 】 一 【查找 和 蔡 换 】 命 令 ， 如 图 26-9 所 示 。 

本 TY 打开 【查找 和 替换 】 对 话 框 ， 在 【查找 范围 】 下 拉 列 表 框 中 ， 可 以 选择 【当前 
文档 】、【 所 选 文 字 】、【 打 开 的 文档 】 和 【整个 当前 本 地 站 点 】 等 选项 ， 在 【 搜 
索 】 下 拉 列 表 框 中 ， 可 以 对 【文本 】、【 源 代码 】 和 【指定 标签 】 等 内 容 进行 搜 
索 ， 如 图 26-10 所 示 。 

EEJe 在 【查找 】 列 表 框 中 输入 要 查找 的 具体 内 容 ; 在 【替换 】 列 表 框 中 输入 要 蔡 换 
的 内 容 ; 在 【选项 】 选 项 组 中 ， 可 以 设置 【区 分 大 小 写 】、【 全 字 匹 配 】 等 选项 。 


单 击 【 查 找 下 一 个 】 或 者 【 蔡 换 】 按 钮 ， 即 可 完成 对 页 面 内 指定 内 容 的 查找 和 蔡 换 
操作 。 
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图 26-9 选择 【查找 和 替换 】 命 令 图 26-10 【查找 和 替换 】 对 话 框 


26.3 上 传 网 站 


网 站 测试 好 以 后 ， 接 下 来 最 重要 的 工作 就 是 上 传 网 站 。 只 有 将 网 站 上 传 到 远程 服务 器 
上 ， 才 能 让 浏览 者 浏览 。 设 计 者 既 可 利用 Dreamweaver 软件 自 带 的 上 传 功能 ， 也 可 利用 专门 
的 FTP 软件 上 传 网 站 。 


26.3.1 案例 4 一 一 使 用 Dreamweaver 上 传 网 站 


在 Dreamweaver CC 中 ， 使 用 站 点 窗口 工具 栏 中 的 电 和 会 按钮 ， 既 可 将 本 地 文件 夹 中 的 文 
件 上 传 到 远程 站 点 ， 也 可 将 远程 站 点 的 文件 下 载 到 本 地 文件 夹 中 。 将 文件 的 上 传 /下 载 操作 和 
存 回 /取出 操作 相 结 合 ， 就 可 以 实现 全 功能 的 站 点 维护 。 具 体操 作 步 又 如 下 。 

ED 选择 【站 点 】 一 【管理 站 点 】 命 令 ， 打 开 【 管 理 站 点 】 对 话 框 ， 如 图 26-11 所 示 。 

EEJDy 在 【管理 站 点 】 对 话 框 中 单 击 【编辑 】 按 钮 [图 ， 打 开 【 站 点 设置 对 象 】 对 话 
框 ， 选 择 【 站 点 】 选 项 ， 如 图 26-12 所 示 。 
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26-11 【管理 站 点 】 对 话 框 26-12 【站 点 设置 对 象 】 对 话 框 


区 了 BY 单 击 右 侧面 板 中 的 击 按钮， 如 图 26-13 所 示 。 

EC 在 【服务 器 名 称 】 文 本 框 中 输入 服务 器 的 名 称 ， 在 【连接 方法 】 下 拉 列 表 框 中 
选择 FTP 选项 ， 在 【FTP 地 址 】 文 本 框 中 输入 服务 器 的 地 址 ， 在 【用 户 名 】 和 【 密 
码 】 文 本 框 中 输入 相关 信息 ， 单 击 【测试 】 按 钮 ， 可 以 测试 网 络 是 否 连 接 成 功 ， 单 
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击 【保存 】 按 钮 ， 完 成 设置 ， 如 图 26-14 所 示 。 
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图 26-13 【服务 器 】 选 项 卡 图 26-14 输入 服务 器 信息 


EEJRD 返回 【站 点 设置 对 象 】 对 话 框 ， 如 图 26-15 所 示 。 
EECSRD 单 击 【保存 】 按 钮 ， 完 成 设置 。 返 回 到 【管理 站 点 】 对 话 框 ， 如 图 26-16 所 示 。 
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图 26-15 设置 之 后 的 【站 点 设置 对 象 】 对 话 框 图 26-16 设置 之 后 的 【管理 站 点 】 对 话 框 


本 TD 单 击 【 完 成 】 按 钮 ， 返 回 站 点 文件 窗口 。 在 【文件 】 面 板 中 ， 单 击 工具 栏 上 的 
回 按 钮 ， 如 图 26-17 所 示 。 
本 TE> 打开 上 传 文件 窗口 ， 在 该 窗口 中 单 击 串 按钮 ， 如 图 26-18 所 示 。 
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图 26-17 【文件 】 面 板 图 26-18 上传 文件 窗口 


EECJD 开始 连接 到 我 的 站 点 之 上 ， 单 击 工具 栏 中 的 鑫 | 按钮 ， 弹 出 一 个 信息 提示 框 ， 如 
图 26-19 所 示 。 


Go 


EC 单 击 【确定 】 按 钮 ， 系 统 开始 上 传 网 站 内 容 ， 如 图 26-20 所 示 。 


26-19 ”信息 提示 框 
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26-20 ”开始 上 传 文件 


26.3.2 ”案例 5 一 一 使 用 FTP 工具 上 传 网 站 
可 以 利用 专门 的 FTP 软件 上 传 网 站 。 具 体操 作 步 骤 如 下 (本 小 节 以 Cute FTP 9.0 进行 


讲解 )。 


EEDDp 打开 FTP 软件 ， 选 择 【 文 件 】 一 【新 建 】 一 【FTP 站 点 】 命 令 ， 如 图 26-21 所 示 。 
EEJUPp 弹出 【此 对 象 的 站 点 属性 : 无 标题 (1)】 对 话 框 ， 如 图 26-22 所 示 。 
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图 26-21 选择 【FTP 站 点 】 命 令 


图 26-22 【此 对 象 的 站 点 属性 : 
无 标题 (1)】 对 话 框 


EEJe 在 【此 对 象 的 站 点 属性 : 无 标题 (1)】 对 话 框 中 根据 提示 输入 相关 信息 ， 单 击 
【连接 】 按 钮 ， 连 接 到 相应 的 地 址 ， 如 图 26-23 所 示 。 
EGR 返回 主 界面 后 ， 切 换 至 【本 地 驱动 器 】 选 项 卡 ， 选 择 要 上 传 的 文件 ， 如 图 26-24 


所 示 。 


本 TY 在 左 侧 窗口 中 选中 需要 上 传 的 文件 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【上载 】 


命令 ， 如 图 26-25 所 示 。 


EECDRD 这 时 ， 在 窗口 的 下 方 窗口 中 将 显示 文件 上 传 的 进度 及 上 传 的 状态 ， 如 图 26-26 所 
示 。 上 传 完成 后 ， 用 户 即 可 在 外 部 浏览 网 站 信息 了 。 
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图 26-25 选择 【上 载 】 命 令 


26.4 综 


= 小 


在 Dreamweaver CC 中 ， 可 以 清理 一 些 不 必要 的 HTML， 


理 文档 的 具体 操作 步骤 如 下 。 
1. 清理 不 必要 的 HTML 


EEIopgs 选择 【命令 】 一 【清理 XHTML】 
命令 ， 弹 出 【清理 HTML/XHTML) 对 
话 框 。 

EECJDyp 在 【清理 HTML/XHTML】 对 话 框 
中 ， 可 以 设置 对 【 空 标 签 区 块 】、 
【多 余 的 嵌 套 标签 】 和 【Dreamweaver 
特殊 标记 】 等 内 容 的 清理 ， 有 具体 设置 
如 图 26-27 所 示 。 


图 26-26 上传 网 站 文件 


合 案例 一 一 清理 网 站 中 的 多 余 文 档 


以 此 增加 网 页 打开 的 速度 。 清 
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图 26-27 设置 相关 选项 


ESD 设置 完成 后 单 击 【确定 】 按 钮 ， 即 可 完成 对 页 面 指定 内 容 的 清理 。 
2. 清理 Word 生成 的 HIML 


ED 选择 【命令 】 一 【清理 Word 生成 的 HIML]】 命令， 打开 【清理 Word 生成 的 
HTML】 对 话 框 ， 如 图 26-28 所 示 。 

EEC 在 【基本 】 选 项 卡 中 ， 可 以 设置 要 清理 的 来 自 Word 文档 的 特定 标记 、 背 景 颜色 
等 选项 。 在 【详细 】 选 项 卡 中 ， 可 以 进一步 设置 要 清理 的 Word 文档 中 的 特定 标记 以 
及 CSS 样式 表 的 内 容 ， 如 图 26-29 所 示 。 











SSTEY 设置 完成 后 单 击 【 确 定 】 按 钮 ， 即 可 完成 对 由 Word 生成 的 HTML 内 容 的 清理 。 
清理 Word 生成 的 HTML X a 家 
a | Wa | 一 一 于 | | 这 
清理 的 HTML 来 自 Word 2000 及 更 高 版 本 ~ es 取消 | 

清理 6 HTWL 来 自 ford 2000 及 更 高 版 本 
a meet 
i zo 
卫 应 用 源 格式 所 < <endiy 杀 件 c ns 
克 完 十 示 动作 记录 ee 























图 26-28 【清理 Word 生成 的 HTML】 对 话 框 图 26-29 【详细 】 选 项 卡 


26.5 疑难 解 惑 


疑问 1: 如 何 正 确 上 传 文件 ? 


答 : 上 传 网 站 的 文件 需要 遵循 两 个 原则 : 第 一 ， 要 确定 上 传 的 文件 一 定 会 被 网 站 使 用 ， 
不 要 上 传 无 关 紧要 的 文件 ， 并 尽量 缩小 上 传 文件 的 体积 ; 第 二 ， 上 传 的 图 片 要 尽量 采用 压缩 
格式 ， 这 不 仅 可 以 节省 服务 器 的 资源 ， 而 且 可 以 提高 网 站 的 访问 速度 。 

疑问 2: 怎样 让 网 页 自动 关闭 ? 

答 : 如 果 希 望 网 页 在 指定 的 时 间 内 能 自动 关闭 ， 可 以 在 网 页 源 代 码 的 标签 后 面 加 入 
如 下 代码 : 


<script LANGUAGE="JavaScript"> 
setTimeout ("self.close()",5000) 
</script> 


代码 中 的 5000 表示 5 秒 钟 ， 它 是 以 毫秒 为 单位 的 。 


讲 淖 旷世 党 个 二 加 一 一 湘 染 号 涯 器 涓 > 汝 所 刷 92 涛 时 
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网 站 安全 与 防御 


网 站 攻击 技术 无 处 不 在 。 在 某 个 安全 程序 非常 高 的 网 站 ， 攻 击 者 也 许 只 用 小 小 
的 一 行 代码 就 可 以 让 网 站 成 为 入 侵 者 的 帮凶， 让 网 站 访问 者 成 了 最 无 辜 的 受害 者 。 
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27.1 网 站 维护 基础 知识 
在 学 习 网 站 安全 与 防御 策略 之 前 ， 用 户 需 要 了 解 相 关 的 网 站 基础 知识 。 
27.1.1 网 站 的 维护 与 安全 


网 站 安全 的 基础 是 系统 与 平台 的 安全 ， 只 有 在 做 好 系统 平台 的 安全 工作 后 ， 才 能 保证 网 
站 的 安全 。 目 前 ， 随 着 网 站 数量 的 增多 ， 以 及 编写 网 站 代码 的 程序 语言 也 在 不 断 地 更 新 ， 致 
使 网 站 漏洞 层出不穷 ， 黑 客 攻 击 手段 不 断 变化 ， 让 用 户 防 不 胜 防 。 但 用 户 可 以 以 不 变 应 万 
变 ， 从 如 下 几 个 方面 来 保障 网 站 的 安全 。 

目前 ， 每 个 网 站 的 服务 器 空间 并 不 都 是 自己 的 。 一 些小 的 公司 没有 经 济 实 力 购买 自己 的 
服务 器 ， 它 们 只 能 去 租 别人 的 服务 器 。 因 此 ， 对 于 在 不 同 地 方 的 网 站 服务 器 空间 ， 其 网 站 防 
范 措施 也 不 尽 相 同 。 


1. 网 站 服务 器 空间 是 租用 的 


针对 这 种 情况 ， 网 站 管理 员 只 能 在 保护 网 站 的 安全 方面 下 功夫 ， 即 在 网 站 开发 这 块 儿 做 
一 些 安全 的 工作 。 

(1) 网 站 数据 库 的 安全 。 一 般 SQL 注入 攻击 主要 是 针对 网 站 数据 库 的 ， 所 以 需要 在 数据 
库 连 接 文件 中 添加 相应 防 攻击 的 代码 。 比 如 在 检查 网 站 程序 时 ， 打 开 那 些 含有 数据 库 操作 的 
ASP 文件 ， 这 些 文件 是 需要 防护 的 页 面 ， 然 后 在 其 头 部 加 上 相关 的 防 注 入 代码 ， 于 是 这 些 页 
面 就 能 防 注 了 ， 最 后 再 把 它们 都 上 传 到 服务 器 上 。 

(2) 堵 住 数 据 库 下 载 漏洞 。 换 句 话说 就 是 不 让 别人 下 载 数据 库 文 件 ， 并 且 数 据 库 文件 的 
命名 最 好 复杂 并 隐藏 起 来 ， 让 别人 认 不 出 来 。 

(3) 网 站 中 最 好 不 要 有 上 传 和 论坛 程序 。 这 样 最 容易 产生 上 传 文件 漏洞 以 及 其 他 的 网 站 
漏洞 。 

(4) 对 于 后 台 管理 程序 的 要 求 是 ， 首 先 不 要 在 网 页 上 显示 后 台 管 理 程序 的 入 口 链接 ， 防 
止 黑客 攻击 ， 其 次 用 户 名 和 密码 不 能 过 于 简单 且 要 定期 更 换 。 

(5) 定期 检查 网 站 上 的 木马 。 使 用 某 些 专门 木马 查 杀 工具 ， 或 使 用 网 站 程序 集成 的 监测 
工具 定期 检查 网 站 上 是 否 存在 木马 。 另 外 ， 还 可 以 把 网 站 上 除了 数据 库 文件 外 的 文件 ， 都 改 
成 只 读 的 属性 ， 以 防止 文件 被 算 改 。 


2. 网 站 服务 器 空间 是 自己 的 


针对 这 种 情况 ， 除 了 采用 上 述 几 点 对 网 站 安全 进行 防范 外 ， 还 要 对 网 站 服务 器 的 安全 进 
行 防范 。 这 里 以 Windows+IIS 实现 的 平台 为 例 ， 需 要 做 到 如 下 几 点 。 

(1) 服务 器 的 文件 存储 系统 要 使 用 NTFS 文件 系统 ， 因 为 在 对 文件 和 目录 进行 管理 方 
面 ，NTFS 系统 更 安全 有 效 。 

(2) 关闭 默认 的 共享 文件 。 

(3) 建立 相应 的 权限 机 制 ， 让 权限 分 配 以 最 小 化 权限 的 原则 分 配给 Web 服务 器 访问 者 。 


(4) 删除 不 必要 的 虚拟 目录 、 人 危险 的 IS 组 件 和 不 必要 的 应 用 程序 映射 。 
(5) 保护 好 日 志文 件 的 安全 。 因 为 日 志文 件 是 系统 安全 策略 的 一 个 重要 环节 ， 可 以 通过 
对 日 记 的 查看 ， 及 时 发 现 并 解决 问题 ， 确 保 日 志文 件 的 安全 能 有 效 提 高 系统 整体 的 安全 性 。 


27.1.2 ”常见 的 网 站 攻击 方式 


网 站 攻击 的 手段 极其 多 样 ， 黑 客 常用 的 网 站 攻击 手段 主要 有 如 下 几 种 。 
1. 阻塞 攻击 


阻塞 类 攻击 手段 的 典型 攻击 方法 是 拒绝 服务 攻击 (Denial of Service，DoS)。 该 方法 是 一 类 
个 人 或 多 人 利用 网 络 协议 组 的 某 些 工具 ， 拒 绝 合 法 用 户 对 目标 系统 (如 服务 器 等 ) 或 信息 访问 。 
攻击 成 功 后 的 后 果 为 使 目标 系统 死机 、 使 端口 处 于 停顿 状态 等 ， 还 可 以 在 网 站 服务 器 中 发 送 
杂乱 信息 、 改 变 文件 名 称 、 删 除 关键 的 程序 文件 等 ， 进 而 扭曲 系统 的 资源 状态 ， 使 系统 的 处 
理 速度 降低 。 

2. 文件 上 传 漏洞 攻击 

网 站 的 上 传 漏洞 根据 在 网 页 文件 上 传 的 过 程 中 ， 对 其 上 传 变量 的 处 理 方式 的 不 同 ， 可 分 
为 动力 型 和 动 网 型 两 种 。 其 中 ， 动 力 型 上 传 漏洞 是 编程 人 员 在 编写 网 页 时 ， 未 对 文件 上 传 路 
径 变 量 进 行 任何 过 滤 就 进行 了 上 传 ， 从 而 产生 了 漏洞 ， 以 致 用 户 可 以 对 文件 上 传 路 径 变量 进 
行 任意 修改 。 动 网 型 上 传 漏洞 最 早出 现在 动 网 论坛 中 ， 其 危害 性 极 大 ， 使 很 多 网 站 都 遭受 了 
攻击 。 而 动力 型 上 传 漏洞 是 因为 网 站 系统 没有 对 上 传 变量 进行 初始 化 ， 在 处 理 多 个 文件 上 传 
时 ， 可 以 将 ASP 文件 上 传 到 网 站 目录 中 所 产生 的 漏洞 。 

上 传 漏洞 攻击 方式 对 网 站 安全 威胁 极 大 。 攻 击 者 可 以 直接 上 传 比如 ASP 木马 文件 而 得 到 
一 个 WEBSHELL， 进 而 控制 整个 网 站 服务 器 。 

3. 跨 站 脚本 攻击 

跨 站 脚本 攻击 一 般 是 指 黑 客 在 远程 站 点 页 面 HTML 代码 中 插入 具有 恶意 目的 的 数据 。 用 
户 认为 该 页 面 是 可 信赖 的 ， 但 当 浏览 器 下 载 该 页 面 时 ， 媒 入 其 中 的 脚本 将 被 解释 执行 。 跨 站 
脚本 攻击 方式 最 常见 的 ， 比 如 通过 窃取 cookie， 或 通过 欺骗 使 用 户 打 开 木 马 网 页 ， 或 直接 在 
存在 跨 站 脚本 漏洞 的 网 站 中 写 入 注入 脚本 代码 ， 在 网 站 挂 上 木马 网 页 等 。 

4. 弱 密 码 的 入 侵 攻 击 

这 种 攻击 方式 首先 需要 用 扫描 器 探测 到 SQL 账号 和 密码 信息 ， 进 而 拿 到 SA 的 密码 ， 然 
后 用 SQLEXEC 等 攻击 工具 通过 1433 端口 连接 到 网 站 服务 器 上 ， 再 开设 以 系统 账号 ， 通 过 
3389 端口 登录 。 这 种 攻击 方式 还 可 以 配合 WEBSHELL 来 使 用 。 一 般 的 ASP+MSSQL 网 站 通 
常会 把 MSSQL 连接 密码 写 到 一 个 配置 文件 中 ， 用 WEBSHELL 来 读 取 配置 文件 里 面 的 SA 密 
码 ， 然 后 再 上 传 一 个 SQL 木马 来 获取 系统 的 控制 权限 。 

5. 网 站 旁 注 入 侵 

这 种 技术 是 通过 IP 绑 定 域名 查询 的 功能 ， 先 查 出 服务 器 上 有 多 少 网 站 ， 再 通过 一 些 薄 弱 
的 网 站 实施 入 侵 ， 拿 到 权限 之 后 转 而 控制 服务 器 的 其 他 网 站 。 


恒 杆 灯 凡 让 呈 恒 一 一 惧 迷 否 将 版 名 当 性 2Z 滤 鲁 
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6. 网 站 服务 器 漏洞 攻击 


网 站 服务 器 的 漏洞 主要 集中 在 各 种 网 页 中 。 由 于 网 页 程序 编写 得 不 严谨 ， 从 而 出 现 了 各 
种 脚本 漏洞 ， 如 动 网 文件 上 传 漏洞 、Cookie 欺骗 漏洞 等 都 属于 脚本 漏洞 。 但 除了 这 几 类 常见 
的 脚本 漏洞 外 ， 还 有 一 些 专门 针对 某 些 网 站 程序 出 现 的 脚本 程序 漏洞 ， 如 用 户 对 输入 的 数据 
过 滤 不 严 、 网 站 源 代码 暴露 及 远程 文件 包含 漏洞 等 。 

对 这 些 漏洞 的 攻击 ， 攻 击 者 需要 有 一 定 的 编程 基础 。 现 在 网 络 上 随时 都 有 最 新 的 脚本 漏 
洞 发 布 ， 也 有 专门 的 工具 ， 初 学 者 完全 可 以 利用 这 些 工 具 进行 攻击 。 


27.2 ”网 站 安全 防御 策略 
在 了 解 了 网 站 安全 基础 知识 后 ， 下 面 介绍 网 站 安全 防御 策略 。 


27.2.1 网 站 硬件 的 安全 维护 


硬件 中 最 主要 的 就 是 服务 器 ， 一 般 要 求 使 用 专用 的 服务 器 ， 不 要 使 用 PC 代替 。 因 为 专用 
的 服务 器 中 有 多 个 CPU， 并 且 硬 盘 的 各 方面 的 配置 也 比较 优秀 ， 如 果 其 中 一 个 CPU 或 硬盘 坏 
了 ， 别 的 CPU 和 硬盘 还 可 以 继续 工作 ， 不 会 影响 到 网 站 的 正常 运行 。 

网 站 机 房 通常 要 注意 室内 的 温度 、 湿 度 及 
通风 性 ， 这 些 将 影响 到 服务 器 的 散热 和 性 能 的 
正常 发 挥 。 如 果 有 条 件 ， 最 好 使 用 两 台 或 两 台 
以 上 的 服务 器 ， 所 有 的 配置 最 好 都 是 一 样 的 ， 
因为 服务 器 经 过 一 段 时 间 要 进行 停机 检修 ， 在 
检修 的 时 候 可 以 运行 别 的 服务 器 工作 ， 这 样 不 
会 影响 到 网 站 的 正常 运行 。 图 27-1 所 示 为 网 站 
服务 器 的 工作 环境 。 


27.2.2 ”网 站 软件 的 安全 维护 


软件 管理 也 是 确保 一 个 网 站 能 够 良好 运行 下 
的 必要 条 件 ， 通 常 包括 服务 器 的 操作 系统 配 
置 、 网 站 的 定期 更 新 、 数 据 的 备份 、 网 络 安全 的 防护 等 。 


1. 服务 器 的 操作 系统 配置 


一 个 网 站 要 能 正常 运行 ， 硬 件 环境 是 一 个 先决 条 件 。 但 是 服务 器 操作 系统 的 配置 是 否 可 
行 和 设置 的 优良 性 如 何 ， 则 是 一 个 网 站 能 否 良 好 长 期 运行 的 保证 。 除 了 要 定期 对 这 些 操作 系 
统 进行 维护 外 ， 还 要 定期 对 操作 系统 进行 更 新 ， 并 使 用 最 先进 的 操作 系统 。 


2. 网 站 的 定期 更 新 
网 站 的 创建 并 不 是 一 成 不 变 的 ， 还 要 对 网 站 进行 定期 的 更 新 。 除 了 更 新 网 站 的 信息 外 ， 





还 要 更 新 或 调整 网 站 的 功能 和 服务 。 对 网 站 中 的 废旧 文件 要 随时 清除 ， 以 提高 网 站 的 精良 
性 ， 从 而 提高 网 站 的 运行 速度 。 还 有 就 是 要 时 时 关注 互联 网 的 发 展 趋势 ， 随 时 调整 自己 的 网 
站 ， 使 其 顺应 潮流 ， 以 便 给 别人 提供 更 便捷 和 贴切 的 服务 。 


3. 数据 的 备份 


所 谓 数据 的 备份 ， 就 是 对 自己 网 站 中 的 数据 进行 定期 备份 ， 这 样 既 可 以 防止 服务 器 出 现 
突 发 错误 丢失 数据 ， 又 可 以 防止 自己 的 网 站 被 别人 “ 黑 ” 掉 。 如 果 有 了 定期 的 网 站 数据 备 
份 ， 那 么 即使 自己 的 网 站 被 别人 “ 黑 ” 掉 了 ， 也 不 会 影响 网 站 的 正常 运行 。 


4. 网 络 安全 的 防护 


所 谓 网 络 的 安全 防护 ， 就 是 防止 自己 的 网 站 被 别人 非法 地 侵入 和 破坏 。 除 了 要 对 服务 器 
进行 安全 设置 外 ， 首 要 的 一 点 是 要 注意 及 时 下 载 和 安装 软件 的 补丁 程序 。 另 外 ， 还 要 在 服务 
器 中 安装 、 设 置 防火 墙 。 防 火 墙 虽然 是 确保 安全 的 一 个 有 效 措施 ， 但 不 是 唯一 的 ， 而 且 不 能 
确保 绝对 安全 。 为 此 ， 还 应 该 使 用 其 他 的 安全 措施 。 

另外 一 点 就 是 要 时 刻 注意 病毒 的 问题 ， 要 时 刻 对 自己 的 服务 器 进行 查 毒 、 杀 毒 等 操作 ， 
以 确保 系统 的 安全 运行 。 如 图 27-2 所 示 为 360 杀毒 软件 的 下 载 页 面 ， 下 载 之 后 ， 将 其 安装 到 
网 站 服务 器 之 中 ， 就 可 以 使 用 该 软件 保护 系统 安全 了 。 
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图 27-2 360 杀毒 软件 的 下 载 页 面 


27.2.3 ”检测 网 站 的 安全 性 


360 网 站 安全 检测 平台 为 网 站 管理 者 提供 了 网 站 漏洞 检测 、 网 站 挂 马 实时 监控 、 网 站 算 改 
实时 监控 等 服务 。 
使 用 360 网 站 安全 检测 平台 检测 网 站 安全 的 具体 操作 步骤 如 下 。 
EU 在 下 浏览 器 中 输入 360 网 站 安全 检测 平台 的 网 址 http:/webscan.360.cn/， 打 开 
360 网 站 安全 的 首页 ， 在 首页 中 输入 要 检测 的 网 站 地 址 ， 如 图 27-3 所 示 。 
ERP9 单 击 【 检 测 一 下 】 按 钮 ， 即 可 开始 对 网 站 进行 安全 检测 ， 并 给 出 检测 的 结果 ， 
如 图 27-4 所 示 。 
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27-3 ”360 网 站 的 安全 检测 页 面 
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图 27-4 ”网 站 安全 检测 结果 


如 果 检 测 出 网 站 存在 安全 漏洞 ， 就 会 给 出 相应 的 评分 。 然 后 单 击 【我 要 更 新 安全 得 分 】 
按钮 ， 就 会 进入 360 网 站 安全 修复 界面 ， 在 对 站 长 权限 进行 验证 后 ， 就 可 以 修复 网 站 安全 漏 
洞 了 ， 如 图 27-5 所 示 。 
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图 27-5 网 站 安全 修复 界面 


27.3 ”综合 案例 一 一 设置 网 站 的 访问 权限 


限制 用 户 的 网 站 访问 权限 往往 可 以 有 效 堵 住 入 侵 者 的 上 传 。 设 置 网 站 访问 权限 的 具体 操 
作 步 又 如 下 。 
EEC 在 资源 管理 器 中 右 击 Di\inetpub 中 的 www.***.com 目录 ， 在 弹出 的 快捷 菜单 中 
选择 【属性 】 命 令 ， 在 打开 的 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 如 图 27-6 所 示 。 
EECRPy 在 【组 或 用 户 名 】 列 表 框 中 选择 任意 一 个 用 户 名 ， 然 后 单 击 【编辑 】 按 钮 ， 打 
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图 27-6 【安全 】 选 项 卡 图 27-7 权限 对 话 框 


ECDIS 单 击 【添加 】 按 钮 ， 打 开 【 选 择 用 户 或 组 】 对 话 框 ， 在 其 中 输入 用 户 名 
Everyone， 如 图 27-8 所 示 。 

EEC 单 击 【确定 】 按 钮 ， 返 回 权 限 对 话 框 ， 可 以 看 到 已 将 Everyone 用 户 添 加 到 列表 
中 。 在 权限 列表 中 选择 【 读 取 和 执行 】、【 列 出 文件 夹 目 录 】、【 读 取 】 权 限 后 ， 
单 击 【 确 定 】 按 钮 ， 即 可 完成 设置 ， 如 图 27-9 所 示 。 
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另外 ， 在 网 页 文件 夹 中 还 有 数据 库 文件 的 权限 设置 需要 进行 特别 设置 。 因 为 用 户 在 提交 
表单 或 注册 等 操作 时 ， 会 修改 到 数据 库 的 数据 ， 所 以 除了 给 用 户 读 取 的 权限 外 ， 还 需要 写 入 
和 修改 权限 ， 否 则 也 会 出 现 用 户 无 法 正常 访问 网 站 的 问题 。 

设置 网 页 数据 库 文件 的 权限 的 操作 方法 为 : 右 击 文件 夹 中 的 数据 库 文件 ， 在 弹出 的 快捷 
菜单 中 选择 【属性 】 命 令 ， 在 打开 的 属性 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 在 【组 或 用 户 
名 】 列 表 框 中 选择 Everyone 用 户 ， 在 权限 列表 中 再 选择 【修改 】、【 写 入 】 权 限 。 


27.4 疑难 解 惑 


疑问 1: 网 站 为 什么 容易 被 攻击 ? 


答 : 每 一 个 站 长 都 不 希望 自己 的 网 站 被 攻击 ， 因 此 就 需要 防 患 于 未 然 ， 找 出 被 攻击 的 原 
因 ， 减 少 麻烦 。 站 长 可 以 从 注入 漏洞 、 跨 站 脚本 (XSS)、 恶 意 文件 执行 、 不 安全 的 直接 对 象 参 
照 物 、 跨 站 指令 伪造 、 信 息 泄露 和 错误 处 理 不 当 、 不 安全 的 认证 和 会 话 管理 、 不 安全 的 加 密 
存储 设备 、 不 安全 的 通信 、 未 对 网 站 地 址 的 访问 进行 限制 等 方面 来 查找 被 攻击 的 原因 ， 找 到 
之 后 ， 进 行 有 针对 性 的 修复 ， 才 能 减少 被 攻击 。 


疑问 2: 如 何 检测 我 的 网 站 服务 器 是 否 被 “ 黑 ”? 


答 : 网 站 的 服务 器 被 “ 黑 ” 之 后 ， 系 统 肯定 会 出 现 运行 速 度 变 慢 、 系 统 账号 异常 等 现 
象 ， 这 时 网 站 管理 者 可 以 从 以 下 几 个 方面 来 检测 。 

(1) 检查 服务 器 上 防护 软件 是 否 有 异常 日 志 ， 比 如 服务 器 安全 狗 系统 账号 扫描 是 否 有 影 
子 账 号 ， 防 护 日 志 是 否 有 异常 拦截 记录 。 

(2) 检查 【控制 面板 】 一 【管理 工具 】 一 【事件 查看 器 】 里 面 日 志 是 否 正 常 。 

(3) 检查 任务 栏 管理 里 面 服务 和 进程 是 否 异常 ， 是 否 有 病毒 或 者 后 门 程序 。 

(4) 检查 网 站 是 否 挂 马 或 者 页 面 文 件 被 葵 换 。 

(5) 检查 系统 账号 是 否 异常 ， 有 无 增加 账号 或 者 修改 密码 。 

(6) 检查 防火 墙 和 其 他 系统 设置 是 否 异常 ， 是 否 被 其 他 人 修改 过 。 

(7) 检查 系统 服务 器 启动 项 是 否 有 异常 程序 。 

(8) 检查 服务 器 端口 是 否 异常 。 
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制作 好 一 个 网 站 后 ， 坐 等 访客 的 光临 是 不 行 的 。 放 在 互联 网 上 的 网 站 就 像 一 块 
立 在 地 下 走道 中 的 公告 牌 一 样 ， 即 使 人 们 在 走道 里 走动 的 次 数 很 多 ， 但 是 往往 也 很 
难 发 现 这 个 公告 牌 。 可 见 ， 宣 传 网 站 有 多 么 重要 。 就 像 任何 产品 一 样 ， 再 优秀 的 网 
站 如 果 不 进行 自我 宣传 ， 也 很 难 有 较 大 的 访问 量 。 
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28.1 网 站 优化 的 方法 与 技巧 


通过 在 网 站 适当 地 添加 广告 信息 ， 可 以 给 网 站 的 拥有 者 带 来 不 小 的 收入 。 随 着 点 击 量 的 
上 升 ， 创 造 的 财富 也 越 多 。 


28.1.1 通过 广告 优化 网 站 内 容 


网 站 广告 设计 更 多 的 时 候 是 通过 烦琐 的 工作 与 多 次 的 尝试 完成 的 。 在 实际 工作 中 ， 网 页 
设计 者 会 根据 需要 添加 不 同类 型 的 网 站 广告 ， 从 而 优化 网 站 内 容 。 网 站 广告 的 形式 大 致 分 为 
以 下 6 种 。 

1. 网 幅 式 广告 

网 幅 式 广告 又 称 旗帜 广告 ， 通 常 横向 出 现在 网 页 中 ， 最 常见 的 尺寸 (单位 : 像素 ) 是 
468x60 和 468x80。 目 前 还 有 728x90 的 大 尺寸 型 ， 它 是 网 络 广告 比较 早出 现 的 一 种 广告 形 
式 。 以 往 网 幅 广告 以 JPG 或 者 GIF 格式 为 主 ， 伴 随 着 网 络 的 发 展 ，SWF 格式 的 网 幅 广告 也 比 
较 常 见 了 。 图 28-1 所 示 为 网 幅 式 广告 。 


2. 弹出 式 广告 


弹出 式 广告 是 互联 网 上 的 一 种 在 线 广告 形式 ， 意 图 透 过 广告 来 增加 网 站 流量 。 用 户 进入 
网 页 时 ， 会 自动 开启 一 个 新 的 浏览 器 视窗 ， 以 吸引 读者 直接 到 相关 网 址 浏览 ， 从 而 收 到 宣传 
之 效 。 这 些 广告 一 般 都 透 过 网 页 的 JavaScript 指令 来 启动 ， 但 也 有 通过 其 他 形式 启动 的 。 由 于 
弹出 式 广告 过 分 泛滥 ， 很 多 浏览 器 或 者 浏览 器 组 件 也 加 入 了 弹出 式 窗口 杀手 的 功能 ， 以 屏蔽 
这 样 的 广告 。 图 28-2 所 示 为 弹出 式 广告 。 
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图 28-1 网 幅 式 广告 图 28-2 弹出 式 广告 
3. 按钮 式 广告 
按钮 式 广告 是 一 种 小 面积 的 广告 形式 。 这 种 广告 形式 被 开发 出 来 主要 有 两 个 原因 : 一 是 
可 以 通过 减 小 面积 来 降低 购买 成 本 ， 让 小 预算 的 广告 主 能 够 有 能 力 购买 ， 二 是 为 了 更 好 地 利 
用 网 页 中 面积 比较 小 的 零散 空白 位 。 
常见 的 按钮 式 广告 有 125x125、120x90、120x60、88x314 4 种 尺寸 。 在 购买 的 时 候 ， 广 
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告 主 也 可 以 购买 连续 位 置 的 几 个 按钮 式 广告 组 成 双 按钮 广告 、 三 按钮 广告 等 ， 以 增强 宣传 效 
果 。 按 钮 式 广告 一 般 容量 比较 小 ， 常 见 的 有 JPEG、GIF、Flash 等 几 种 格式 。 如 图 28-3 所 示 
为 按钮 式 广告 。 

4. 文字 链接 广告 

文字 链接 广告 是 一 种 最 简单 、 最 直接 的 网 上 广告 ， 只 需要 将 超 链接 加 入 相关 文字 即 可 ， 
如 图 28-4 所 示 。 
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耐克 阿迪 361 安 聘 李宁 ERKE 看 
28-3 ”按钮 式 广告 28-4 文字 链接 广告 
5. 横幅 式 广告 


横幅 式 广告 是 通栏 式 广告 的 初步 发 展 阶段 ， 初 期 用 户 认可 程度 很 高 ， 有 不 错 的 效果 。 但 
是 伴随 着 时 间 的 推移 ， 人 们 对 横幅 式 广告 已 经 开始 变 得 麻木 。 于 是 广告 主 和 媒体 开发 了 通栏 
式 广告 ， 它 比 横幅 式 广告 更 长 ， 面 积 更 大 ， 更 具有 表现 力 ， 更 吸引 人 。 一 般 的 通栏 式 广告 尺 
寸 有 590x105、590x80 等 ， 已 经 成 为 一 种 常见 的 广告 形式 。 图 28-5 所 示 为 横幅 式 广告 。 

6. 浮动 式 广告 

浮动 式 广告 是 网 页 页 面 上 悬浮 或 移动 的 非 鼠 标 响 应 广告 ， 形 式 可 以 为 GIF 或 Flash 等 格 
式 ， 如 图 28-6 所 示 。 


con EE TT 


~ 首页 。 二手 劾 ”各 房 ” 别 时 商 请 。 写字楼 小 \ 


手机 冰点 裸 价 


质量 鉴定 无 忧 购 机 











图 28-5 横幅 式 广告 图 28-6 浮动 式 广告 


28.1.2 ”通过 搜索 引擎 优化 网 站 
搜索 引擎 优化 (SEO) 是 一 项 技术 性 较 强 的 工作 ， 通 过 搜索 引擎 优化 不 仅 能 让 网 站 在 搜索 引 
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擎 上 有 良好 的 排名 表现 ， 而 且 能 让 整个 网 站 看 上 去 轻松 明快 ， 页 面 高 效 简洁 ， 目 标 客户 能 够 
直 奔 主题 ， 网 站 更 容易 发 挥 沟通 企业 与 客户 的 最 佳 效果 。 

搜索 引擎 优化 从 总 体 技术 而 言 ， 可 以 分 两 个 方面 进行 ， 分 别 是 站 内 搜索 引擎 优化 和 站 外 
搜索 引擎 优化 。 


1 站 内 搜索 引擎 优化 


站 内 搜索 引擎 优化 ， 简 单 地 说 就 是 在 网 站 内 部 进行 搜索 引擎 优化 。 对 网 站 所 有 者 来 说 ， 
站 内 搜索 引擎 优化 是 最 容易 控制 的 部 分 ， 因 为 网 站 是 自己 的 ， 可 以 根据 自己 的 需求 ， 设 定 网 
站 结构 ， 制 作 网 站 内 容 ， 而 且 投入 成 本 可 以 控制 。 

站 内 搜索 引擎 优化 大 体 分 为 以 下 几 个 部 分 。 

1) “关键 词 策略 

我 们 知道 ， 在 搜索 引擎 中 检索 信息 都 是 通过 输入 查找 内 容 的 关键 词 或 句子 ， 然 后 由 搜索 
引擎 进行 分 词 在 索引 库 中 查找 来 实现 的 。 因 此 ， 关 键 词 在 搜索 引擎 中 的 位 置 至 关 重 要 ， 它 是 
整个 搜索 过 程 中 最 基本 也 是 最 重要 的 一 步 ， 也 是 搜索 引擎 优化 中 进行 网 站 优化 、 网 页 优化 的 
基础 。 

关键 词 确定 应 考虑 以 下 几 个 因素 : 内 容 相 关 、 主 关键 词 不 可 太 宽 泛 、 主 关键 词 不 要 太 特 
殊 、 站 在 访客 角度 思考 、 选 择 竞争 度 小 搜索 次 数 多 的 关键 词 。 

2) ”域名 优化 

域名 在 网 站 建设 中 拥有 很 重要 的 作用 ， 它 是 联系 网 站 与 网 络 客户 的 纽带 ， 就 好 比 一 个 品 
牌 、 商 标 一 样 拥有 重要 的 识别 作用 ， 所 以 一 个 优秀 的 域名 应 该 能 让 访问 者 轻松 地 记忆 ， 并 且 
快速 地 输入 。 

3) “主机 优化 

主机 是 网 站 建立 必需 的 一 个 环节 。 特 别 是 虚拟 主机 更 需要 进行 优化 。 通 常 我 们 选择 主机 
时 考虑 以 下 几 点 因素 : 安全 稳定 性 、 连 接 数 、 备 份 机 制 、 自 定义 页 面 、 服 务 等 。 

4) ”网 站 结构 优化 

网 站 结构 是 网 站 优化 的 基础 。 在 网 站 结构 优化 过 程 中 ， 我 们 应 该 注意 这 样 几 点 : 用 户 体 
验 提 升 、 权 重 分 配 、 锚 文字 优化 、 网 站 物理 结构 优化 、 内 部 链接 优化 等 。 

5) ”内 容 优 化 

网 站 提供 的 内 容 应 该 具有 独特 性 ， 而 且 是 有 价值 的 ， 它 能 切实 满足 潜在 客户 某 方面 需 
求 。 这 样 的 网 站 内 容 往往 能 获得 潜在 用 户 的 支持 、 信 任 ， 最 终 为 提高 转化 率 加 分 ， 并 逐渐 形 
成 自己 的 权威 品牌 ， 进 入 网 站 良性 发 展 的 轨道 。 因 此 ， 在 对 网 站 内 容 优化 时 ， 我 们 应 遵循 坚 
持原 创 、 转 载 有 度 、 杜 绝 伪 原 创 等 原则 。 

6) ”内 部 链接 优化 

合理 的 内 部 链接 可 以 极 大 地 提升 网 站 的 优化 效果 ， 对 于 大 型 网 站 更 是 如 此 。 因 此 ， 在 进 
行 网 站 内 部 链接 优化 时 ， 应 该 注意 尊重 用 户 的 体验 、URL 的 唯一 性 、 尽 量 满足 3 次 点 击 原 
则 、 使 用 文字 导航 、 使 用 锚 文本 等 几 点 。 

7) 页 面 代 码 优化 

网 站 结构 的 优化 是 站 在 整个 网 站 的 基础 上 看 问题 ， 而 页 面 优化 是 站 在 具体 页 面 上 看 问 


题 。 网 页 是 构成 网 站 的 基本 要 素 。 只 有 每 个 网 页 都 得 到 较 好 的 优化 ， 才 能 带 来 整个 网 站 的 优 
化 成 功 ， 也 才能 带 来 更 多 有 用 的 流量 。 


度 、 代 码 优 化 、URL 优化 等 。 
2. 站 外 搜索 引擎 优化 


站 外 搜索 引擎 优化 ， 顾 名 思 义 ， 是 指 除 站 内 优化 以 外 其 他 途径 的 优化 方法 ， 也 可 以 说 是 
脱离 站 点 自身 的 搜索 引擎 优化 技术 ， 命 名 源 自 外 部 站 点 对 网 站 在 搜索 引擎 排名 的 影响 。 与 站 
内 优化 相 比 ， 站 外 优化 相对 而 言 更 单一 ， 效 果 也 更 直接 。 缺 点 是 难度 较 大 ， 有 很 多 外 部 因素 
是 超出 站 长 的 直接 控制 的 。 

最 有 用 、 功 能 最 强大 的 外 部 优化 因素 就 是 反 向 链 
接 ， 即 通常 所 说 的 外 部 链接 ， 如 图 28-7 所 示 。 

互联 网 的 本 质 特 征 之 一 就 是 链接 。 毫 无 疑问 ， 外 
部 链接 对 于 一 个 站 点 的 抓 取 、 收 录 、 排 名 都 起 到 了 非 
常 重要 的 作用 。 

实际 上 ， 外 部 链接 表达 的 是 一 种 投票 机 制 ， 也 就 
是 网 站 之 间 的 信任 关系 。 比 如 ， 网 站 A 的 某 个 页 面 
中 有 一 个 指向 网 站 B 中 某 个 页 面 的 链接 ， 则 对 搜索 
引擎 来 说 ， 网 站 A 的 这 个 页 面 给 网 站 B 的 页 面 投 一 
票 ， 网 站 A 的 页 面 是 信任 网 站 B 的 这 个 页 面 的 。 图 28-7 ”外 部 链接 

搜索 引擎 在 抓 取 互联 网 繁多 页 面 的 基础 上 ， 根 据 
网 页 之 间 的 链接 关系 ， 统 计 出 每 个 网 站 的 每 个 网 页 得 到 的 外 部 链接 投票 数量 ， 从 而 可 以 计算 
出 页 面 的 外 部 链接 权重 。 

(1) 页 面 得 到 的 外 部 链接 投票 越 多 ， 其 重要 性 就 越 大 ， 外 部 链接 权重 就 越 高 ， 同 等 条 件 
下 关键 词 排名 就 越 靠 前 。 

(2) 页 面 得 到 的 外 部 链接 投票 越 少 ， 其 重要 性 就 越 小 ， 外 部 链接 权重 就 越 低 ， 同 等 条 件 
下 关键 词 排 名 就 越 靠 后 。 

因为 搜索 引擎 认为 外 部 链接 是 很 难 被 肆意 操控 的 ， 所 以 目前 的 搜索 引擎 都 将 外 部 链接 的 
权重 作为 主要 的 关键 词 排名 算法 之 一 。 也 正 是 因为 搜索 引擎 的 投票 机 制 ， 所 以 就 导致 外 部 链 
接 在 搜索 引擎 优化 中 起 到 最 重要 的 一 个 作用 ， 就 是 提高 网 页 权重 。 

外 部 链接 经 常 使 用 在 线 工 具 、 新 闻 诱 饵 、 创 意 点 子 、 发 起 炒作 事件 、 幽 默 笑 话 等 方法 。 


Links to your site 

Domains Total links 
cnrcn 7.570 
xytc cn 282 
hnlungcancer com cn 272 
99.com cn 183 


goodjk com 165 
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28.2 ”网 站 推广 方法 与 技巧 


网 站 做 好 后 ， 需 要 大 力 地 宣传 和 推广 ， 只 有 如 此 才能 让 更 多 的 人 知道 并 浏览 。 宣 传 广告 
的 方式 很 多 ， 包 括 利用 大 众 传媒 、 网 络 传媒 、 电 子 邮件 、 留 言 板 与 博客 、 在 论坛 中 宣传 。 效 
果 最 明显 的 是 网 络 传媒 的 方式 。 


个 剖 灯 从 让 民 习 一 怪 而 油 否 民 习 半 许 ” 才 8Z 小 重 
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28.2.1 利用 大 众 传媒 进行 推广 


大 众 传媒 通常 包括 电视 、 报 纸 杂 志 、 户 外 广告 及 其 他 印刷 品 。 

1. 电视 

目前 ， 电 视 是 最 大 的 宣传 媒体 。 如 果 在 电视 中 做 广告 ， 一 定 能 收 到 像 其 他 电视 广告 商品 
一 样 家 喻 户 晓 的 效果 ， 但 对 个 人 网 站 而 言 就 不 太 适 合 了 。 

2. 报纸 杂志 

报纸 是 仅 次 于 电视 的 第 二 大 媒体 ， 也 是 使 用 传统 方式 宣传 网 站 的 最 佳 途径 。 作 为 一 名 电 
脑 爱好 者 ， 在 使 用 软 硬 件 和 上 网 的 过 程 中 ， 通 常 也 积累 了 一 些 值得 与 别人 交流 的 经 验 和 心 
得 ， 那 就 不 妨 将 它 写 出 来 ， 写 好 后 寄 往 像 《 电 脑 爱好 者 杂志 》 等 比较 著名 的 刊物 ， 从 而 让 更 
多 的 人 受益 。 可 以 在 文章 的 末尾 注 明 自己 的 主页 地 址 和 E-mail 地 址 ， 或 者 将 一 些 难以 用 书稿 
方式 表达 的 内 容 放 在 自己 的 网 站 中 表达 。 如 果 文 章 很 受 欢 迎 ， 那 么 就 能 吸引 更 多 的 朋友 前 来 
访问 自己 的 网 站 。 

3. 户外 广告 

在 一 些 繁华 、 人 流量 大 的 地 段 的 广告 牌 上 做 广告 也 是 一 种 比较 好 的 宣传 方式 。 目 前 ， 在 街 
头 、 地 铁 内 所 做 的 网 站 广告 就 说 明了 这 一 点 ， 但 这 种 方式 比较 适合 有 实力 的 商业 性 质 的 网 站 。 

4. 其 他 印刷 品 


公司 信 签 、 名 片 、 礼 品 包装 等 都 应 该 印 上 网 址 名 称 ， 让 客户 在 记 住 你 的 名 字 、 职 位 的 同 
时 ， 也 能 看 到 并 记 住 你 的 网 址 。 


28.2.2 利用 网 络 媒介 进行 推广 


由 于 网 络 广 告 的 对 象 是 网 民 ， 具 有 很 强 的 针对 性 ， 因 此 ， 使 用 网 络 广告 不 失 为 一 种 较 好 
的 宣传 方式 。 


1. 网 络 广告 


在 选择 网 站 做 广告 的 时 候 ， 需 要 注意 以 下 两 点 。 

(1) 应 选择 访问 率 高 的 门户 网 站 。 只 有 选择 访问 率 高 的 网 站 ， 才 能 达到 “ 广 而 告 之 ”的 
效果 。 

(2) 优秀 的 广告 创意 是 吸引 浏览 者 的 重要 手段 。 要 想 唤 起 浏览 者 点 击 的 欲望 ， 就 必须 给 
浏览 者 点 击 的 理由 。 因 此 ， 图 形 的 整体 设计 、 色 彩 和 图 形 的 动态 设计 以 及 与 网 页 的 搭配 等 都 
是 极其 重要 的 。 图 28-8 所 示 为 天 天 营养 网 首页 ， 在 其 中 就 可 以 看 到 添加 的 网 络 广告 信息 。 


2. 电子 邮件 


这 个 方法 对 自己 熟悉 的 朋友 使 用 比较 有 效 ， 或 者 在 主页 上 提供 更 新 网 站 邮件 订阅 功能 ， 
一 旦 自己 的 网 站 有 更 新 ， 便 可 通知 网 友 了 。 如 果 随 便 地 向 自己 不 认识 的 网 友 发 E-mail 宣传 自 


己 主 页 的 话 ， 就 不 太 友好 了 。 有 些 网 友 会 认为 那 是 垃圾 邮件 ， 以 至 于 给 网 友 留 下 不 好 的 印 
象 ， 并 将 其 列 入 黑 名 单 或 拒 收 邮件 列表 内 。 这 样 对 提高 自己 网 站 的 访问 率 并 无 实质 性 的 帮 
助 ， 而 且 若 未 经 别人 同意 就 三 番 五 次 地 发 出 一 样 的 邀请 信 ， 也 是 不 礼貌 的 。 

发 出 的 E-mail 邀请 信 要 有 诚意 ， 态 度 要 和 语 ， 并 将 自己 网 站 更 新 的 内 容 简 要 地 介绍 给 网 
友 ， 倘 若 网 友 表示 不 愿意 再 收 到 类 似 的 信件 ， 就 不 要 再 将 通知 邮件 寄 给 他 们 了 。 图 28-9 所 示 
为 邮箱 登录 页 面 的 广告 。 
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3. 留言 板 、 博 客 

处 处 留言 、 引 人 注意 也 是 一 种 很 好 的 宣传 自己 网 站 的 方法 。 在 网 上 浏览 当 看 到 一 个 不 错 
的 网 站 时 ， 可 以 考虑 在 这 个 网 站 的 留言 板 中 留 下 赞美 的 语句 ， 并 把 自己 网 站 的 简介 、 地 址 一 
并 写 下 来 ， 将 来 其 他 朋友 留言 时 看 到 这 些 留言 ， 说 不 定 就 会 有 兴趣 到 你 的 网 站 中 去 参观 
= Wh 

随 着 网 络 的 发 展 ， 现 在 诞生 了 许多 个 人 博客 ， 在 博客 中 也 可 以 留 下 你 宣传 网 站 的 语句 。 
还 有 一 些 是 商业 网 站 的 留言 板 、 博 客 等 。 比 如 网 易 博客 等 ， 每 天 都 会 有 数 百人 在 上 面 留 言 
访问 率 较 高 ， 在 那里 留言 对 于 让 别人 知道 自己 网 站 的 效果 会 更 明显 。 图 28-10 所 示 为 网 易 博 
客 的 首页 。 

留言 时 的 用 语 要 真诚 、 简 洁 ， 切 莫 将 与 主题 无 关 的 语句 也 写 在 上 面 。 留 言 篇 幅 要 尽量 简 
短 ， 不 要 将 同一 篇 留言 反复 地 写 在 别人 的 留言 板 上 。 

4. 网 站 论坛 

目前 ， 大 型 的 商业 网 站 中 都 有 多 个 专业 论坛 ， 有 的 个 人 网 站 上 也 有 论坛 ， 那 里 会 有 许多 
人 在 发 表 观点 ， 在 论坛 中 留言 也 是 一 种 很 好 的 宣传 网 站 的 方式 。 图 28-11 所 示 为 天 涯 社区 论 
坛 首页 。 
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图 28-10 网 易 博客 图 28-11 天 涯 论坛 


28.2.3 ”利用 其 他 形式 进行 推广 


大 众 媒体 与 网 络 媒体 是 比较 常见 的 网 站 推广 方式 。 下 面 再 来 介绍 两 种 其 他 推广 方式 。 

1. 注册 搜索 引擎 

在 知名 的 网 站 中 注册 搜索 引擎 ， 可 以 提高 网 站 的 访问 量 。 当 然 ， 很 多 搜索 引擎 (有 些 是 竞 
价 排名 ) 是 收费 的 ， 这 对 于 商业 网 站 可 以 使 用 ， 对 于 个 人 网 站 就 有 点 不 好 接受 了 。 图 28-12 所 
示 为 百度 网 站 的 企业 推广 首页 。 

2. 和 其 他 网 站 交换 链接 

对 个 人 网 站 来 说 ， 友 情 链接 可 能 是 最 好 的 宣传 网 站 的 方式 。 跟 访问 量 大 的 、 优 秀 的 个 人 
网 页 相互 交换 链接 ， 能 大 大 地 提高 网 页 的 访问 量 。 图 28-13 所 示 为 某 个 网 站 的 友情 链接 区 域 。 
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图 28-12 百度 推广 首页 图 28-13 ”网 站 友情 链接 


这 个 方法 比 参加 广告 交换 组 织 要 有 效 得 多 ， 起 码 可 以 选择 将 广告 放置 到 哪个 网 页 。 能 
择 与 那些 访问 率 较 高 的 网 页 建立 友情 链接 ， 这 样 造访 网 页 的 网 友 肯 定 会 多 起 来 。 

友情 链接 是 相互 建立 的 ， 想 要 别人 加 上 自己 网 站 的 链接 ， 就 要 在 自己 网 页 的 首页 或 专门 
做 友情 链接 的 专 页 放置 对 方 的 链接 ， 并 适当 地 进行 推荐 ， 这 样 才能 吸引 更 多 的 人 愿意 与 你 共 
建 链接 。 此 外 ， 网 站 标志 要 制作 得 漂亮 、 醒 目 ， 使 人 一 看 就 有 兴趣 点 击 。 


Gos6 


28.3 ”综合 案例 一 一 查看 网 站 的 流量 


使 用 CNZZ 数据 专家 可 以 查看 网 站 流量 。CNZZ 数据 专家 是 全 球 最 大 的 中 文 网 站 统计 分 
析 平 台 ， 为 各 类 网 站 提供 免费 、 安 全 、 稳 定 的 流量 统计 系统 与 网 站 数据 服务 ， 帮 助 网 站 创造 
更 大 价值 。 
使 用 CNZZ 数据 专家 查看 网 站 流量 的 具体 操作 步骤 如 下 。 
在 正 浏 览 器 中 输入 网 址 http://www.cnzz.com/， 打 开 CNZZ 数据 专家 网 的 主页 ， 
如 图 28-14 所 示 。 
EEJ29 单 击 【 免 费 注册 】 按 钮 进行 注册 ， 进 入 创建 用 户 界 面 ， 根 据 提示 输入 相关 信 
息 ， 如 图 28-15 所 示 。 
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图 28-14 CNZZ 数据 专家 网 的 主页 图 28-15 ”注册 界面 


ED 单 击 【 同 意 协议 并 注册 】 按 钮 ， 即 可 注册 成 功 ， 并 进入 【添加 站 点 】 界 面 ， 如 
图 28-16 所 示 。 
EEC 在 【添加 站 点 】 界 面 中 输入 相关 信息 ， 如 图 28-17 所 示 。 
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28-16 【添加 站 点 】 界面 图 28-17 输入 站 点 信息 


ED 单 击 【 确 认 添加 站 点 】 按 钮 ， 进 入 【站 点 设置 】 界 面 ， 如 图 28-18 所 示 。 
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EECSUD 在 【统计 代码 】 界 面 中 单 击 【复制 到 剪贴 板 】 按 钮 ， 根 据 需 要 复制 代码 (此 处 选 
择 “ 站 长 统计 文字 样式 ”)， 如 图 28-19 所 示 。 
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图 28-18 【站 点 设置 】 界 面 图 28-19 复制 代码 


EDUDD 将 代码 插入 到 页 面 源码 中 ， 如 图 28-20 所 示 。 
ET 保存 并 预览 效果 ， 如 图 28-21 所 示 。 
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站 长 统计 
戌 100% ~ 
图 28-20 ”添加 代码 到 页 面 源 代码 之 中 图 28-21 预览 网 页 


EECUD) 单 击 【 站 长 统计 】 按钮， 进入 查看 用 户 登 录 界 面 ， 如 图 28-22 所 示 。 
EC 进入 查看 界面 ， 即 可 查看 网 站 的 浏览 量 ， 如 图 28-23 所 示 。 
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图 28-22 ”查看 用 户 登录 界面 图 28-23 ”网 站 的 浏览 结果 






28.4 疑难 解 惑 


疑问 1: 如 何 摆 放 网 站 广告 的 位 置 ? 

答 : 由 于 人 的 眼球 会 因为 阅读 而 产生 疲劳 ， 所 以 在 越 靠近 左上 角 的 位 置 越 能 够 吸引 读者 
的 注意 力 。 这 也 是 为 什么 很 多 网 站 的 Logo 都 是 放 在 左上 角 ， 可 不 要 说 设计 者 都 是 千篇一律 。 
这 样 做 其 实 是 有 好 处 的 ， 在 左上 角 的 Logo 更 加 能 够 让 人 记 住 你 的 网 站 的 这 个 “品牌 ”。 

疑问 2: 站 长 如 何 提高 网 站 收录 率 ? 


答 : 网 站 站 长 可 以 从 3 个 方面 来 提高 网 站 的 收录 率 : 首先 是 增加 网 络 蜂 蛛 (或 候 虫 ) 访 问 网 
站 频率 ， 其 次 要 建立 良好 的 站 内 结构 ;最 后 要 让 网 络 蜂 蛛 知道 网 页 价值 。 
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